// stylelint-disable selector-class-pattern
%vCalenderBase {
  font-family: $font-number;
  border: unset;
  border-radius: 6px;

  .vc-header {
    padding: 1.75rem 1.5rem;
  }

  .vc-arrows-container {
    padding: 1.75rem 1.5rem 1.25rem;
  }

  .vc-weekday {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid $color-line;
  }

  .vc-weeks {
    padding: 1rem 1.5rem;
  }

  .vc-highlight {
    background: $color-primary !important;
  }

  .vc-day {
    padding: 0.5rem 0;
  }

  .vc-day-content {
    &.is-disabled {
      font-weight: 400 !important;
      cursor: not-allowed;
      background: transparent !important;
    }
  }
}

%vCalenderDingBeauty {
  .vc-weeks {
    padding: 1rem 1.5rem;
    font-weight: 400;
  }

  .vc-highlight {
    background: $color-primary !important;
    border-radius: 0 !important;
    width: 100%;
    height: 100%;
    font-weight: 400;
  }

  .vc-day {
    // padding: 0.5rem 0;
    width: 40px;
    height: 40px;
    margin: 5px auto;
  }

  .vc-day-content {
    border-radius: 0;
    width: 100%;
    height: 100%;
    font-weight: 400;

    &:not(.is-disabled) {
      color: $color-secondary;
    }

    &:hover:not(.is-disabled) {
      background-color: transparent;
      border: 1px solid $color-primary;
      height: 40px;
    }

    &:focus {
      background-color: transparent;
      border: 0;
      font-weight: 400;
    }
  }
}

.vc-container {
  &.isStyleBase {
    @extend %vCalenderBase;
  }

  &.isStyleForm {
    @extend %vCalenderBase;

    .vc-weeks {
      padding: 1rem 1.5rem 0;
    }
  }
  &.isStyleDingBeauty {
    @extend %vCalenderDingBeauty;
  }
  &.isStyleBorder {
    border: 1px solid #D6D6D6;
  }
}