@import 'main';

.wrapper {
  min-width: 340px;
  max-width: 100%;

  @include flexbox();
  @include flex-wrap(wrap);
}

.time-legend {
  position: relative;
  overflow: hidden;
  margin-left: 7%;
  width: 93%;

  @include flexbox();
}

.time-quarter {
  position: relative;
  padding: 4px 0;
  width: 25%;
  color: $color_grey;
  letter-spacing: 0.2px;
  font-size: 12px;
  line-height: 1.33;

  &::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 5px;
    background: $color_grey;
    content: '';
  }
}

.time-hour {
  position: absolute;
  z-index: 1;
  margin: 4px 0;
  background: rgba(#fff, $alpha: 0.8);
  color: $color_dark;
  letter-spacing: 0.2px;
  font-size: 12px;
  line-height: 1.33;
}

.table {
  width: 100%;

  @include flexbox();
}

.day-legend {
  width: 7%;
  border-right: none;
  border-left: 1px solid $color_table_border;

  .day {
    border-right: none;
  }
}

.day {
  min-height: 33px;
  width: 100%;
  height: calc(100% / 7);
  border-top: 1px solid $color_table_border;
  border-right: 1px solid $color_table_border;

  @include flexbox();
  @include align-items(center);
  @include justify-content(center);

  &:last-child {
    border-bottom: 1px solid $color_table_border;
  }
}

.column {
  width: calc(93% / 24);

  &:nth-child(6n - 4) {
    .hour {
      border-left: 1px solid $color_grey;
    }
  }

  &:nth-child(6n - 5):not(:last-child) {
    .hour {
      border-right: none;
    }
  }
}

.hour {
  min-height: 33px;
  width: 100%;
  height: calc(100% / 7);
  border-top: 1px solid $color_table_border;
  border-right: 1px solid $color_table_border;
  cursor: pointer;

  &:hover {
    border: 1px solid $color_primary;
  }

  &:last-child {
    border-bottom: 1px solid $color_table_border;

    &:hover {
      border-bottom: 1px solid $color_primary;
    }
  }
}

.hour_checked {
  border-top: 1px solid $color_primary_deep_dark;
  border-right: 1px solid $color_primary_deep_dark;
  background-color: $color_primary;

  &:hover {
    border: 1px solid $color_primary_deep_dark;
    background: $color_primary_deep_dark;
  }

  &:last-child {
    border-bottom: 1px solid $color_primary_deep_dark;
  }
}

.hour_highlighted {
  background: $color_primary_deep_dark;
}