@import 'mixins/form';
@import 'mixins/date-input';

$time-picker-cell-height: 28px;

@include b(time-picker) {
  @include component-in-form('#{&}') {
    max-width: 100%;
  }

  @include component-date-input;

  @include e(popup) {
    position: fixed;
    background-color: var(--#{$rd-prefix}background-color);
    border-radius: var(--#{$rd-prefix}border-radius);
    box-shadow: var(--#{$rd-prefix}shadow-popup);
  }

  @include e(header) {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 41px;
    border-bottom: 1px solid var(--#{$rd-prefix}color-divider);
  }

  @include e(panel) {
    display: inline-block;
    vertical-align: top;
  }

  @include e(column) {
    position: relative;
    display: inline-block;
    height: calc(8px + #{$time-picker-cell-height} * 8);
    padding: 4px 0;
    margin: 0;
    overflow: hidden auto;
    vertical-align: top;
    list-style: none;

    &::after {
      display: block;
      height: calc(#{$time-picker-cell-height} * 7);
      content: '';
    }
  }

  @include e(cell) {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: $time-picker-cell-height;
    margin: 0;
    font-variant-numeric: tabular-nums;
    list-style: none;
    cursor: pointer;

    &:not(.is-active):hover {
      background-color: var(--#{$rd-prefix}background-color-hover);
    }

    @include when(disabled) {
      color: var(--#{$rd-prefix}color-disabled);
      pointer-events: none;
    }

    @include when(active) {
      background-color: var(--#{$rd-prefix}background-color-primary);
    }
  }

  @include e(footer) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    border-top: 1px solid var(--#{$rd-prefix}color-divider);
  }
}