@use "sass:math";
@use "@befe/brick-style/src/themes/base";

$height-normal-line: base.height(8);

// @note padding(n) 要求本文件也 @use base
$normal-gap: base.padding(2);
$arrow-gap: base.padding(4);

// @todo: 颜色变量 (以下也是);
$color-border-light: #eee;
$border-light: 1px $color-border-light solid;

$color-highlight-text-normal: #4C84FF;

$color-bg-highlight-normal: #F2F5FF;
$color-bg-highlight-medium: #DBE4FF;

$border-inner: $border-light;

// 内部内容样式
$color-text-item-inside-range: #4C84FF;

$color-bg-item-inside-range: #DBE4FF;

// 周标题 & 日期主区域的间隔
$gap-week-title-and-content: base.padding(1) * 3;


@mixin datePickerContentBlock() {
  & {
    display: inline-block;
    vertical-align: middle;
  }
}

@mixin datePickerItemDisabled($bg, $text) {
  & {
    cursor: not-allowed;
    background-color: $bg;
    color: $text;
  }
}

// @todo: year-month 用来干哈的?
@mixin datePickerContentLayout(// 类型: date | year-month | month | year | quarter
  $type,

  // 每一个内容项的宽高
  $width,
  $height,

  // 水平 / 垂直间距
  $width-gap,
  $height-gap,

  $size,

  $height-week-row,
) {

  .brick-date-picker-popper-size-#{$size}, .brick-range-picker-popper-size-#{$size} {
    [data-content-type="#{$type}"] {

      // @todo: title 宽度需要预置 ( 不同尺寸 )
      //.brick-date-picker-title {
      //  width: base.$width-panel;
      //  position: relative;
      //}

      // 内容布局 (日期)
      .brick-date-picker-content-row,
      .brick-date-picker-content-title {
        white-space: nowrap;

        + .brick-date-picker-content-row {
          margin-top: $height-gap;
        }

        .item-cell {
          @include datePickerContentBlock();
          & {
            text-align: center;
            width: $width;
            line-height: $height;
            height: $height;
          }
        }

        .item-gap {
          @include datePickerContentBlock();
          & {
            width: $width-gap;
            height: $height;
          }
        }
      }

      .brick-date-picker-content-title {
        $height-title: $height-week-row;
        height: $height-title;

        .item-cell, .item-gap {
          height: $height-title;
          line-height: $height-title;
          vertical-align: top;
        }
      }

      .brick-date-picker-content-title
      + .brick-date-picker-content-row {
        margin-top: $gap-week-title-and-content;
      }
    }
  }
}