$component-identifier: '.date-picker';

#{$component-identifier} {
  display: inline-block;
  border: 1px solid $color-gray4;
  border-radius: 5px;
  background-color: $color-white;

  .button {
    @include border-top-radius(0);

    width: 100%;
  }

  &__previous-month,
  &__next-month {
    @include flexbox-value-width(16px);

    cursor: pointer;
  }

  &__top-bar-current {
    flex: 1;
    text-align: center;
  }

  &__month {
    margin: $spacing-tiny;
  }

  &__top-bar {
    @include border-top-radius(4px);

    padding: $spacing-tiny $spacing-small $spacing-tiny $spacing-small;
  }

  &__days-of-week {
    padding: 0 $spacing-tiny;
  }

  &__top-bar,
  &__days-of-week,
  &__week {
    display: flex;
  }

  &__top-bar,
  &__days-of-week {
    background-color: $color-gray2;
  }

  &__day-of-week,
  &__day {
    margin: 2px;
    display: inline-block;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 2.4rem;
  }

  &__day {
    border-radius: 3px;
    cursor: pointer;

    &:hover:not(.is-disabled):not(.is-active) {
      background-color: $color-gray2;
      font-weight: 500;
    }

    &.is-active {
      background-color: $background-color-active;
      color: $color-light-text;
      font-weight: 500;
    }

    &.m-other-month {
      opacity: .6;
    }

    &.is-disabled {
      opacity: .3;
      cursor: not-allowed;
    }
  }

  &__time-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 125px;
    margin: 0 auto;
    margin-bottom: $spacing-small;

    .form-element__textbox {
      @include flexbox-value-width(35px);
    }
  }
}

$component-identifier: '';