@use "sass:map";
@use "@befe/brick-style/src/themes/base";
@use "@befe/brick-style/src/themes/time-picker";

/*
  @note: 这块... 确实不太应该这么处理 ( 在 time picker 内存在 date picker 的样式... )

  - 但是, date picker 内确实应用 & 利用 time picker 内的渲染了...
 */
.brick-time-picker-popper, .brick-date-picker-popper {
  .brick-time-picker-panel-wrapper {
    white-space: nowrap;

    display: inline-block;

    user-select: none;
    background-color: #fff;

    font-size: 0;
  }

  .with-second {
    .brick-time-picker-aside {
      width: time-picker.$timepicker-aside-item-with-second-width;
    }
  }

  .brick-time-picker-aside {
    border-right: 1px base.$color-border-divider solid;
  }

  .brick-time-picker-aside:last-child {
    border-right: 0;
  }

  .brick-time-picker-aside {
    font-size: base.font-size('sm');
    position: relative;
    display: inline-block;

    // @todo: 与 date picker 的 aside 样式合并
    width: time-picker.$timepicker-aside-item-width;
    overflow: hidden;

    // @note: 很重要, 要解决 body 的 22px (或其他固定值 line-height) 造成的 "幽灵底部 padding" 问题
    // @todo: 这块未来可以统一将一些 inline block 布局, 改为 flex 布局
    vertical-align: middle;

    &[data-hover-status="hover"] {
      overflow: auto;
    }

    .brick-aside-item {
      cursor: pointer;
      text-align: center;

      color: time-picker.$time-picker-aside-item-text-normal;
      background-color: time-picker.$time-picker-aside-item-bg-normal;

      &:hover {
        background-color: time-picker.$time-picker-aside-item-bg-hover;
      }

      &:active {
        background-color: time-picker.$time-picker-aside-item-bg-active;
      }
    }

    [data-state="selected"] {
      color: time-picker.$time-picker-aside-item-text-selected;
      background-color: time-picker.$time-picker-aside-item-bg-selected;
    }
  }
}

// size 处理
@each $size in time-picker.$timepicker-size-list {
  $aside-item-height: map.get(time-picker.$timepicker-aside-item-height-list, $size);
  $font-size: map.get(time-picker.$timepicker-aside-item-font-size-list, $size);

  // 按照 UI 稿, 反推出来的计算逻辑 ( 适用于 sm & md 尺寸 )
  $aside-height: $aside-item-height * 10 + 12px;

  /*
    @note: 这个处理如上, 也是一种比较 hack 的存在 (time picker 内需要考虑 date picker 的样式...)
   */
  .brick-time-picker-popper.brick-time-picker-popper-size-#{$size},
  .brick-date-picker-popper.brick-date-picker-popper-size-#{$size} {
    .brick-time-picker-aside {
      height: $aside-height;
      // 交互考虑: 需要确保最后一项能置顶显示
      padding: 4px 0 ($aside-height - $aside-item-height);
    }

    .brick-aside-item {
      height: $aside-item-height;
      line-height: $aside-item-height;
      font-size: $font-size;
    }
  }
}