@import '../styles/theme.scss';

$hd: 2; // 基本单位

$color-grey-0: $paletteGrey900;
$color-grey-1: $paletteGrey700;
$color-grey-2: $paletteGrey500;
$color-grey-3: $paletteGrey300;
$color-grey-4: $paletteGrey200;
$color-grey-5: $paletteGrey100;
$color-grey-6: $paletteGrey50;

/* Text Color */
$color-text-base: $paletteTextPrimary; // 文字的基本色
$color-text-base-inverse: $paletteTextPrimary2; // 反色
$color-text-secondary: $paletteTextSecondary; // 辅助色
$color-text-placeholder: $paletteTextDisabled;
$color-text-disabled: $paletteTextDisabled;
$color-text-title: $paletteTextPrimary; // 文章标题
$color-text-paragraph: $paletteTextPrimary; // 文章段落

/* 背景色 */
$color-bg: $paletteBackgroundPaper;
$color-bg-base: $paletteBackgroundDefault;
$color-bg-light: $paletteBackgroundDefault;
$color-bg-lighter: tint($color-bg-light, 50%);
$color-bg-grey: $paletteBackgroundDefault;

/* Font */
$font-size-xs: 10px * $hd; // 非常用字号，用于标签
$font-size-sm: 12px * $hd; // 用于辅助信息
$font-size-base: 14px * $hd; // 常用字号
$font-size-lg: 16px * $hd; // 常规标题
$font-size-xl: 18px * $hd; // 大标题
$font-size-xxl: 20px * $hd; // 用于大号的数字

/* 透明度 */
$opacity-active: 0.6; // Button 等组件点击态额透明度
$opacity-disabled: 0.38; // Button 等组件禁用态的透明度

/* Line Height */
$line-height-base: 1; // 单行
$line-height-en: 1.3; // 英文多行
$line-height-zh: 1.5; // 中文多行

/* 水平间距 */
$spacing-h-sm: 5px * $hd;
$spacing-h-md: 8px * $hd;
$spacing-h-lg: 12px * $hd;
$spacing-h-xl: 16px * $hd;

/* 垂直间距 */
$spacing-v-xs: 3px * $hd;
$spacing-v-sm: 6px * $hd;
$spacing-v-md: 9px * $hd;
$spacing-v-lg: 12px * $hd;
$spacing-v-xl: 15px * $hd;

// 默认主题下 $color-border-lighter
@mixin border-thin(
  $color: $color-border-lighter,
  $style: solid,
  $directions: top bottom right left,
  $width: 1px
) {
  @each $value in $directions {
    border-#{$value}: $width $color $style;
  }
}

@mixin border-thin-top($color: $color-border-lighter, $style: solid, $width: 1px) {
  @include border-thin($color, $style, top, $width);
}

@mixin active {
  transition: background-color 0.3s;

  &:active {
    background-color: $color-grey-5;
  }
}

.at-radio {
  background-color: $color-bg;
  position: absolute;
  z-index: $zIndexDropdown;
  width: 100%;
  box-shadow: $shadows1;

  &__option_wrap {
    padding: #{$spacing-v-lg} $spacing-h-xl #{$spacing-v-lg} 0;
  }

  &__option_container {
    display: flex;
  }

  &__title {
    flex: 6;
    // color: $color-text-base;
    // font-size: $font-size-lg;
    text-align: left;
    // line-height: $line-height-zh;
  }

  &__icon {
    flex: 1;
    text-align: right;
    font-size: $font-size-lg;
    overflow: hidden;
    visibility: hidden;

    &--checked {
      visibility: visible;
    }
  }

  &__desc {
    display: block;
    width: 86%;
    text-align: left;
    // font-size: $font-size-sm;
    // color: $color-grey-2;
    letter-spacing: 0;
    // line-height: $line-height-zh;
  }

  &__option {
    padding-left: $spacing-h-xl;
    @include active;

    &--disabled {
      .at-radio__option_container,
      .at-radio__desc {
        opacity: $opacity-disabled;
      }

      &:active {
        background-color: $color-bg;
      }
    }
    &--active {
      &.default,
      &.primary {
        color: $palettePrimaryMain;
      }
      &.inherit {
        color: inherit;
      }
      &.secondary {
        color: $paletteSecondaryMain;
      }
      &.error {
        color: $paletteErrorMain;
      }
      &.success {
        color: $paletteSuccessMain;
      }
      &.warning {
        color: $paletteWarningMain;
      }
      &.progress {
        color: $paletteProgressMain;
      }
    }
  }

  &__option + &__option {
    .at-radio__option_wrap {
      // @include border-thin-top($color: $color-grey-4, $width: 1PX);
    }
  }
}

.header {
  position: relative;
  // z-index: $zIndexDropdown;
}
.dropdown {
  background: $paletteBackgroundPaper;
  position: absolute;
  height: 400px;
  width: 100%;
  box-shadow: $shadows1;
  z-index: $zIndexDropdown;
}
.mask {
  width: 100vh;
  height: 100vh;
  position: fixed;
  opacity: 0;
  background: black;
  left: 0;
  top: 0;
  z-index: $zIndexDropdown - 1;
}