@use "./variables";
@use "sass:meta";
@use "sass:map";
@use "sass:math";
@use "sass:color";

@mixin writeVars($value, $prevKey) {
  @if meta.type-of($value) == map {
    @each $key, $val in $value {
      @if $prevKey == "" {
        @include writeVars($val, $key);
      } @else {
        @include writeVars($val, $prevKey + "-" + $key);
      }
    }
  } @else if meta.type-of($value) == color {
    $rgb: color.to-space($value, rgb);
    $r: math.round(color.channel($rgb, "red", $space: rgb));
    $g: math.round(color.channel($rgb, "green", $space: rgb));
    $b: math.round(color.channel($rgb, "blue", $space: rgb));
    $a: color.alpha($rgb);
    @if $a < 1 {
      --#{$prevKey}: rgba(#{$r}, #{$g}, #{$b}, #{$a});
    } @else {
      --#{$prevKey}: rgb(#{$r}, #{$g}, #{$b});
    }
  } @else {
    --#{$prevKey}: #{$value};
  }
}

@mixin elevation($value) {
  @if $value == none or $value == 0 {
    box-shadow: none;
  } @else if $value < 0 {
    box-shadow:
      inset 0 0 2px var(--trans-lighter),
      // inset 0 0 2px color-mix(in srgb, var(--background-rev-color) 5%, transparent),
      inset
        0
        calc(#{$value * -1} * var(--elevation-size))
        calc(#{$value * -1} * 4 * var(--elevation-size))
        var(--trans-lighter); // color-mix(in srgb, var(--background-rev-color) 5%, transparent);
  } @else {
    box-shadow:
      0
        calc(#{$value} * var(--elevation-size))
        calc(#{$value} * 4 * var(--elevation-size))
        var(--trans-lighter),
      // color-mix(in srgb, var(--background-rev-color) 5%, transparent);
      0
        var(--elevation-size)
        var(--elevation-size)
        var(--trans-lighter); // color-mix(in srgb, var(--background-rev-color) 5%, transparent);
  }
}

@mixin form-control-base() {
  display: block;
  //width: 100%;
  padding: var(--gap-sm) var(--gap-default);
  border: 1px solid transparent;

  font-size: var(--font-size-default);
  font-family: var(--font-family);
  font-variant-numeric: tabular-nums;
  line-height: var(--line-height);

  color: var(--text-trans-default);
}

@mixin help() {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  cursor: help;
}

@mixin flex-direction($direction, $defaultGap: null) {
  flex-direction: $direction;

  @if ($defaultGap) {
    gap: $defaultGap;
  }

  // Chromium 84이하 (Flex Gap 미지원) .gap-*에 대한 폴백
  @supports not (appearance: auto) {
    @if ($defaultGap) {
      gap: 0;
      > * + * {
        @if ($direction == row) {
          margin-left: $defaultGap;
        } @else {
          margin-top: $defaultGap;
        }
      }
    }

    @each $key, $val in map.get(variables.$vars, gap) {
      &.gap-#{$key} {
        gap: 0;
        > * + * {
          @if ($direction == row) {
            margin-left: var(--gap-#{$key});
          } @else {
            margin-top: var(--gap-#{$key});
          }
        }
      }
    }
  }
}