@import "common/var";
@import "./date-picker/picker.scss";
@import "./date-picker/date-picker.scss";
@import "./scrollbar.scss";
@import "./popper";

.time-unfold {

  &-popper {
    width: 268px;
    box-sizing: border-box;

    .el-picker-panel__content {
      max-height: 256px;
      margin: 0;
      .el-scrollbar__view {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 16px;
        margin-top: 0;

        .time-unfold__item {
          width: 50px;
          height: 24px;
          line-height: 24px;
          border-radius: 4px;
          font-size: 14px;
          text-align: center;
          margin-top: 16px;
          cursor: pointer;

          &:hover {
            background: #F5F7FE;
          }

          &.selected:not(.disabled) {
            background-color: $--color-primary;
            color: $--color-white;
          }

          &.disabled {
            background-color: transparent;
            color: $--color-text-secondary;
            cursor: not-allowed;
          }
        }
      }
    }
  }
}