/**
 *
 * This file may have been modified by Bytedance Inc. (“Bytedance Inc.'s Modifications”). 
 * All Bytedance Inc.'s Modifications are Copyright (year) Bytedance Inc..  
 * 
 * This source code is licensed under the Apache license.
 * See LICENSE file in the project root for license information.
 *
 */
@import '../../../styles/variables.less';
@import '../../../styles/mixins.less';

@import './variables.less';
@import './mixins.less';

// @import './sp-time-picker.less';

// 时间选择框样式覆写
@picker-prefix-cls: ~'@{ant-prefix}-picker';

@picker-time-panel-column-width: 80px;

.@{picker-prefix-cls}-dropdown .@{picker-prefix-cls}-panel {
  > .@{picker-prefix-cls}-time-panel {
    position: relative;
    padding: 4px 0;

    &::before {
      position: absolute;
      content: '';
      height: 4px;
      width: @picker-time-panel-column-width + 1px;
      top: 0;
      left: 80px;
      border: 1px solid @picker-border-color;
      border-top: 0;
      border-bottom: 0;
    }

    &::after {
      position: absolute;
      content: '';
      height: 4px;
      width: @picker-time-panel-column-width + 1px;
      bottom: 0;
      left: 80px;
      border: 1px solid @picker-border-color;
      border-top: 0;
      border-bottom: 0;
    }

    .@{picker-prefix-cls}-content {
      &::before {
        position: absolute;
        content: '';
        height: 4px;
        width: @picker-time-panel-column-width + 1px;
        top: 0;
        right: @picker-time-panel-column-width - 1px;
        border: 1px solid @picker-border-color;
        border-top: 0;
        border-bottom: 0;
      }

      &::after {
        position: absolute;
        content: '';
        height: 4px;
        width: @picker-time-panel-column-width + 1px;
        bottom: 0;
        right: @picker-time-panel-column-width - 1px;
        border: 1px solid @picker-border-color;
        border-top: 0;
        border-bottom: 0;
      }
    }
  }
}

.@{picker-prefix-cls}-time-panel {
  .@{picker-prefix-cls}-time-panel-column {
    width: @picker-time-panel-column-width;

    > li:not(.@{picker-prefix-cls}-time-panel-cell-selected) {
      &.@{picker-prefix-cls}-time-panel-cell {
        .@{picker-prefix-cls}-time-panel-cell-inner {
          &:hover {
            background: @picker-basic-cell-hover-color;
          }
        }
      }
    }

    > li {
      &.@{picker-prefix-cls}-time-panel-cell-selected {
        .@{picker-prefix-cls}-time-panel-cell-inner {
          color: @picker-basic-cell-active-color;
          background: @picker-basic-cell-active-bg;
        }
      }
    }
  }
}

.@{picker-prefix-cls}.sp-picker-range {
  .@{picker-prefix-cls}-active-bar {
    display: none;
  }
}
.@{picker-prefix-cls} {
  .auxo-time-picker-separator-inner {
    display: inline-block;
    width: 8px;
    height: 1px;
    vertical-align: middle;
    background: @color-text-icon-3;
  }
}