// ********************************************
// container definition
$el-container: #{$prefix}-time-picker;
$picker-menu: #{$prefix}-time-picker-menu;
$picker-menu-header: #{$picker-menu}__header;
$picker-panel-container: #{$picker-menu}__panel-container;
$picker-panel: #{$prefix}-time-picker-panel;
$picker-panel-wrapper: #{$picker-panel}__wrapper;
$picker-panel-header: #{$picker-panel}__header;

$addon-wrapper: #{$prefix}-input-addon-wrapper;
$addon-group: #{$prefix}-input-addon-group__addon;

$border-radius: $theme-base-border-radius;

// ********************************************
// vars
$border-type: solid 1px;

.#{$el-container} {
  &--isMenuOpened {
    .#{$addon-group} {
      border-left: $border-type color(brand-primary, 700);
      .em-ds-button {
        border: $border-type color(brand-primary, 700);
      }
    }
  }
  .#{$addon-wrapper} {
    &__addon--right {
      ::before {
        width: 0;
      }
    }
    min-width: space(xxl) * 2;
  }
}

.#{$picker-menu} {
  background-color: color(neutral, 000);
  position: relative;
  flex-direction: column;
  display: flex;
  @include border-radius($border-radius);
  @include box-shadow(depth(200));

  .#{$picker-menu-header} {
    background-color: color(neutral, 050);
    color: color(neutral, 600);
    font-weight: bold;
    text-align: center;
    padding: space(s) 0;
    font-size: font-size(600);
  }

  .#{$picker-panel-container} {
    flex-direction: row;
    display: flex;
  }
}

.#{$picker-panel-wrapper} {
  position: relative;
  display: flex;
  flex-direction: column;

  &:last-of-type {
    .#{$picker-panel} {
      border-right: unset;
    }
  }

  .#{$picker-panel-header} {
    height: 100%;
    background-color: color(neutral, 050);
    text-align: center;
    color: color(neutral, 800);
    padding: space(xs) * 0.9 0;
    font-size: font-size(300);
  }

  .#{$picker-panel} {
    outline: none;
    position: relative;
    background: color(neutral, 000);
    border-right: border-size(xs) solid color(neutral, 300);

    &:focus {
      @include box-shadow(0 0 4px 0 rgba(color(brand-primary, 500), 0.7));
      z-index: 10;
    }

    &__item-list-container {
      overflow: hidden;
      padding: 0 space(s);
    }

    &__item-list {
      transition: transform duration(slow) easing(base);
    }

    &__item {
      @include body-text-style();
      @include center();
      width: space(l);
      height: space(l);
      cursor: pointer;
      color: color(neutral, 800);
      vertical-align: center;
      text-align: center;
      border-radius: 50%;
      user-select: none;
      padding-top: space(xs) * 0.4;

      &--disabled {
        position: relative;
        color: color(neutral, 500);
        cursor: not-allowed;
        &::after{ // this renders the cross-line in disabled times
          content: '';
          height: 1px;
          width: 50%;
          background: color(neutral, 500);
          position: absolute;
          top: 50%;
        }
        &:hover {
          color: color(neutral, 500);
        }
      }

      &:hover
        :not(.em-ds-time-picker-panel__item--disabled)
        :not(.em-ds-time-picker-panel__item--selected) {
        border: 1px solid color(brand-primary, 600);
        box-shadow: inset 0 0 0 1px color(brand-primary, 300);
        font-weight: lighter;
        color: color(brand-primary, 600);
      }
      &--disabled:hover {
        color: color(neutral, 500);
      }

      &--selected {
        font-weight: font-weight(semibold);
        color: color(neutral, 000);

        &:hover {
          border: $border-type color(brand-primary, 600);
          font-weight: bolder;
          box-shadow: inset 0 0 0 1px color(brand-primary, 300);
          color: color(neutral, 000);
        }

        &::after {
          background: #fff;
        }
      }
    }

    &--scrolling {
      .#{$picker-panel}__item-list {
        transition: transform duration(fast) easing(base);
      }
      .#{$picker-panel}__item {
        &:hover {
          border: 1px solid rgba(0, 0, 0, 0);
        }
      }
    }

    &__selected-container {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      height: space(l);
      width: 100%;
      display: flex;
      justify-content: center;
    }
    &__selected-circle {
      background-color: color(brand-primary, 600);
      border: 1px solid rgba(0, 0, 0, 0);
      border-radius: 50%;
      width: space(l);
      height: space(l);
    }

    &__arrow-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: space(l) * 0.8;

      button:not(.#{$prefix}-icon-button--disabled) {
        outline: none;
        svg, svg:not([fill]) {
          @include icon-color(color(brand-primary, 600));
        }
      }
    }
  }
}

.#{$el-container} {
  &.variant-disabled {
    & > .em-ds-input {
      background: color(neutral, 080);
      border-color: color(neutral, 400);
      input,
      select {
        color: #616b7f;
      }
      pointer-events: none;
    }
  }
}