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

@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 {
    --#{$prevKey}: #{$value};
  }
}

@mixin elevation($value) {
  @if $value == none or $value == 0 {
    box-shadow: none;
  } @else if $value < 0 {
    box-shadow:
      inset 0 0 0.1667rem var(--trans-lighter),
      inset
        0
        calc(#{$value * -1} * var(--elevation-size))
        calc(#{$value * -1} * 4 * var(--elevation-size))
        var(--trans-lighter);
  } @else {
    box-shadow:
      0
        calc(#{$value} * var(--elevation-size))
        calc(#{$value} * 4 * var(--elevation-size))
        var(--trans-lighter),
      0
        var(--elevation-size)
        var(--elevation-size)
        var(--trans-lighter);
  }
}

@mixin form-control-base() {
  display: block;
  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 border-direction-variants($dir, $d) {
  .bd#{$d} {
    border-#{$dir}: 1px solid !important;
  }

  @each $key, $val in map.get(variables.$vars, theme) {
    @each $key1, $val1 in $val {
      .bd#{$d}-theme-#{$key}-#{$key1} {
        border-#{$dir}-color: var(--theme-#{$key}-#{$key1}) !important;
      }
    }
  }

  @each $key, $val in map.get(variables.$vars, trans) {
    .bd#{$d}-trans-#{$key} {
      border-#{$dir}-color: var(--trans-#{$key}) !important;
    }
  }

  @each $key, $val in map.get(variables.$vars, border-color) {
    .bd#{$d}-color-#{$key} {
      border-#{$dir}-color: var(--border-color-#{$key}) !important;
    }
  }

  .bd#{$d}-none {
    border-#{$dir}: none !important;
  }

  .bd#{$d}-transparent {
    border-#{$dir}-color: transparent !important;
  }
}

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

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

  // Chromium 84이하 / WebKit 61 (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});
          }
        }
      }
    }
  }
}