@import "mixins/mixins";
@import "common/var";

@include b(schedule-selector) {
  display: inline-block;
  padding: 20px 5px 20px 10px;
  text-align: center;
  font-size: 14px;
  color: $--color-text-primary;

  @include m(border) {
    border: 1px solid $--border-color-base;
  }

  @include e(title-wrap) {
    display: flex;
    flex-direction: row;
    padding-left: $--schedule-selector-time-label-width;
    margin-bottom: 10px;
    user-select: none;
  }

  @include e(date-day) {
    width: $--schedule-selector-date-day-width;
    margin-right: 10px;
  }

  @include e(content) {
    display: flex;
    padding-right: 5px;
    overflow: auto;
  }

  @include e(time-wrap) {
    width: $--schedule-selector-time-label-width;
    user-select: none;
  }

  @include e(time-label) {
    height: $--schedule-selector-time-label-height;
    line-height: $--schedule-selector-time-label-height;
    margin-bottom: 10px;
    background: #fff;

    &:last-child {
      margin-bottom: 0;
    }

    @media (max-width: 699px) {
      font-size: 10px;
    }

    @include m(halfHour) {
      height: $--schedule-selector-time-label-halfhour-height;
      line-height: $--schedule-selector-time-label-halfhour-height;
    }
  }

  @include e(date-cell) {
    width: $--schedule-selector-date-day-width;
    height: $--schedule-selector-date-day-height;
    margin: 0 10px 10px 0;
    border-radius: 2px;
    touch-action: none;

    &:hover {
      background: $--schedule-selector-date-day-hover-bg-color;
    }

    &:last-child {
      margin-bottom: 0;
    }

    @include m(selected) {
      background: $--schedule-selector-date-day-selected-bg-color;
    }

    @include m(unselected) {
      background: $--schedule-selector-date-day-unselected-bg-color;
    }

    @include m(halfHour) {
      &:nth-child(odd) {
        margin-bottom: 4px;
      }
    }
  }
}