@import 'base';

.time-pickers {
  display: flex;
  flex-direction: column;
  align-items: stretch;

  $size: 20px;
  $padding-width: 20px;
  $padding-height: 5px;
  $header-column-width: 140px;

  &__header {
    display: flex;
    width: 26 * $size;
    padding: 0 ($padding-width - $size / 2);
    flex-shrink: 0;
    margin-left: $header-column-width;

    &-hour {
      display: flex;
      justify-content: center;
      width: $size;
      flex-shrink: 0;
      overflow: visible;
    }
  }

  &__days {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    flex: 1;
    overflow: scroll;

    &-bottom-filler {
      height: 100px;
      flex-shrink: 0;
    }
  }

  &__day {
    display: flex;
    flex-shrink: 0;

    &-label {
      padding-top: 5px;
      padding-left: 10px;
      width: $header-column-width;
    }

    &-hours {
      display: flex;
      justify-content: center;
      align-items: stretch;
      flex-direction: column;

      &-slider {
        display: flex;
        cursor: ew-resize;
      }

      &-selectors {
        flex-shrink: 0;
        position: relative;
        height: 20px;
        margin: 0 $padding-width;
      }
    }
  }

  &__hour {
    padding: $padding-height 0px;

    &-box {
      height: $size;
      width: $size;
      border: solid 1px;
      border-left: 0px;
      display: flex;
      align-items: stretch;

      &-chunk {
        flex: 1;
        position: relative;

        $handle-width: 4px;

        %handle {
          position: absolute;
          width: $handle-width;
          top: 0;
          bottom: 0;
        }

        &-start {
          @extend %handle;
          left: - $handle-width / 2;
        }

        &-end {
          @extend %handle;
          right: - $handle-width / 2;
        }

        &-handle {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: color(black, normal, 0.4);
        }
      }
    }

    &:first-of-type {
      padding-left: $padding-width;

      .time-pickers__hour-box {
        border-left: solid 1px;
      }
    }

    &:last-of-type {
      padding-right: $padding-width;
    }
  }

  &__selector {
    position: absolute;
    top: 0;
    $width: 40px;

    &-container {
      position: absolute;
      top: 0;
      left: - $width / 2;
      width: $width;
      display: flex;
      justify-content: center;
    }

    &-chunk {
      z-index: 0;
      height: 20px;
      color: color(primary);
    }

    &-chunks {
      position: relative;
      z-index: 1;
      @extend %card;
      padding: 5px 0;

      &-chunk {
        padding: 2px 6px;

        &:hover {
          background-color: color(black, pale);
        }
      }

      &-chunk_selected {
        background-color: color(primary);
        color: white;

        &:hover {
          background-color: color(primary);
        }
      }
    }
  }
}