@import "./mixins/mixins.scss";
@import "./themes/vars.scss";

@include themes-mixin {
  @include once {
    @include b(time-picker) {
      position: relative;
      display: inline-block;
      width: 180px;
    }
  }
  @include b(time-picker-selector) {
    @include once {
      font-size: 12px;
      border-radius: 6px;
      margin: 4px 0;
      width: 180px;
      overflow: hidden;
      @include fade-in-scale-up-transition(time-picker);
      @include e(actions) {
        padding: 10px 15px;
        display: flex;
        justify-content: space-around;
      }
    }
    background-color: $--time-picker-background-color;
    box-shadow: $--time-picker-box-shadow;// 0px 2px 20px 0px rgba(0,0,0,0.16);
    @include b(time-picker-selector-time) {
      @include once {
        height: 244px;
        display: flex;
        position: relative;
      }
      border-bottom: 1px solid $--time-picker-divider-color;
    }
    @include b(time-picker-selector-time-row) {
      @include once {
        width: 60px;
        height: 244px;
        flex-direction: column;
      }
      @include e(item) {
        @include once {
          cursor: pointer;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background-color .3s $default-cubic-bezier;
          background: transparent;        
        }
        color: map-get($--time-picker-text-color, 'default');
        &:hover {
          background-color:  $--time-picker-item-background-color;
        }
        @include m(active) {
          background-color: $--time-picker-item-background-color;
          color: map-get($--time-picker-text-color, 'active');
        }
      }
    }
  }
}