// 获取 css 变量和值的 mixin 和 functions
@import './semantic/helper';

// Colors
@function theme-rgb($cat, $attr) {
  $prefix: get-css-prefix();
  $css-var: #{$prefix}-#{get-css-var-name($cat, $attr)};

  @if is-old-version($cat, $attr) {
    $color: get-mapping-color($cat, $attr);
    $mapping-css-var: #{$prefix}-#{get-mapping-css-var($cat, $attr)};

    @return var($mapping-css-var, var($css-var, $color));
  }

  $color: get-new-color($cat, $attr);

  @return var($css-var, $color);
}

@function theme-rgba($cat, $attr, $opacity) {
  $prefix: get-css-prefix-rgb();
  $css-var: #{$prefix}-#{get-css-var-name($cat, $attr)};

  @if is-old-version($cat, $attr) {
    $color: get-mapping-color($cat, $attr);
    $mapping-css-var: #{$prefix}-#{get-mapping-css-var($cat, $attr)};
    $mixin-css-var: var($mapping-css-var, var($css-var, to-rgb($color)));

    // `unquote` is a workaround for node-sass misinterprets rgba as builtin function
    // https://github.com/sass/node-sass/issues/2251
    // dart-sass doesn't seem to have this issue.
    @return unquote('rgba(#{$mixin-css-var}, #{$opacity})');
  }

  $color: get-new-color($cat, $attr);

  @return unquote('rgba(#{var($css-var, to-rgb($color))}, #{$opacity})');
}

@mixin theme-color($prop, $cat, $attr, $opacity: 1) {
  $color: get-color($cat, $attr);

  @if $opacity >= 1 {
    #{$prop}: $color;
    #{$prop}: theme-rgb($cat, $attr);
  } @else {
    #{$prop}: rgba($color, $opacity);
    #{$prop}: theme-rgba($cat, $attr, $opacity);
  }
}

// Font
@mixin theme-font-weight($weight) {
  font-weight: map-get($font-weight, $weight);
  font-weight: get-font-weight-var($weight);
}

@mixin theme-font-size($size) {
  font-size: map-get($font-size, $size);
  font-size: get-font-size-var($size);
  line-height: map-get($line-height, $size);
  line-height: get-line-height-var($size);
}

@mixin theme-title-size($size) {
  @include theme-font-weight(medium);
  @include theme-font-size($size);
}

@mixin theme-paragraph-size($size) {
  @include theme-font-weight(normal);
  @include theme-font-size($size);
}

// $cat: title | paragraph
@mixin theme-font($cat, $size) {
  @if $cat == title {
    @include theme-title-size($size);
  } @else {
    @include theme-paragraph-size($size);
  }
}

// Spacing
@mixin theme-spacing($prop, $size) {
  #{$prop}: map-get($spacing, $size);
  #{$prop}: get-spacing-var($size);
}

// Border
@mixin theme-border-radius($size: medium) {
  border-radius: $size;
  border-radius: get-border-radius-var($size);
}

@mixin theme-border-width($prop, $width: medium) {
  #{$prop}: map-get($border-width, $width);
  #{$prop}: get-border-width-var($width);
}

@mixin theme-border-impl(
  $prop,
  $width,
  $style,
  $color-cat,
  $color-attr,
  $color-opacity: 1
) {
  #{$prop}-style: $style;

  @include theme-color(#{$prop}-color, $color-cat, $color-attr, $color-opacity);

  @if map-get($border-width, $width) {
    @include theme-border-width(#{$prop}-width, $width);
  } @else {
    #{$prop}-width: $width;
  }
}

// 兼容原有 ($width, $style, $cat, $i, $opacity)形式
@mixin theme-border(
  $width,
  $style,
  $color-cat,
  $color-attr,
  $color-opacity: 1
) {
  @include theme-border-impl(
    border,
    $width,
    $style,
    $color-cat,
    $color-attr,
    $color-opacity
  );
}

@mixin theme-border-top(
  $width,
  $style,
  $color-cat,
  $color-attr,
  $color-opacity: 1
) {
  @include theme-border-impl(
    border-top,
    $width,
    $style,
    $color-cat,
    $color-attr,
    $color-opacity
  );
}

@mixin theme-border-right(
  $width,
  $style,
  $color-cat,
  $color-attr,
  $color-opacity: 1
) {
  @include theme-border-impl(
    border-right,
    $width,
    $style,
    $color-cat,
    $color-attr,
    $color-opacity
  );
}

@mixin theme-border-bottom(
  $width,
  $style,
  $color-cat,
  $color-attr,
  $color-opacity: 1
) {
  @include theme-border-impl(
    border-bottom,
    $width,
    $style,
    $color-cat,
    $color-attr,
    $color-opacity
  );
}

@mixin theme-border-left(
  $width,
  $style,
  $color-cat,
  $color-attr,
  $color-opacity: 1
) {
  @include theme-border-impl(
    border-left,
    $width,
    $style,
    $color-cat,
    $color-attr,
    $color-opacity
  );
}

// Shadow
$shadow-spec-focus: $shadow-size-focus rgba($shadow-color, 0.1) !default;
$shadow-spec-layer: $shadow-size-layer rgba($shadow-color, 0.1) !default;
$shadow-spec-modal: $shadow-size-modal rgba($shadow-color, 0.1) !default;

$shadow-spec-focus-var: $shadow-size-focus theme-rgba(shadow, bg, 0.1) !default;
$shadow-spec-layer-var: $shadow-size-layer theme-rgba(shadow, bg, 0.1) !default;
$shadow-spec-modal-var: $shadow-size-modal theme-rgba(shadow, bg, 0.1) !default;

$theme-shadow: (
  'focus': $shadow-spec-focus,
  'layer': $shadow-spec-layer,
  'modal': $shadow-spec-modal,
);

$theme-shadow-var: (
  'focus': $shadow-spec-focus-var,
  'layer': $shadow-spec-layer-var,
  'modal': $shadow-spec-modal-var,
);

@mixin theme-shadow($cat) {
  $shadow: map-get($theme-shadow, $cat);
  $shadow-var: map-get($theme-shadow-var, $cat);

  box-shadow: $shadow;
  box-shadow: var(--shadow-spec-#{$cat}, $shadow-var);
}