@use 'sass:map';
@use 'sass:color';

@use 'mixins/config.scss'as *;
@use 'common/var.scss'as *;
@use 'mixins/mixins.scss'as *;

:root {

  #{joinValName((font, family))}: #{$fontFamily};

  @include set-css-val-type($types);

  @include set-css-val-space($spaceType);

  @include set-neutral-color-val($neutral);

  /* Font */
  #{joinValName((heading1))}: 48px;
  #{joinValName((heading2))}: 40px;
  #{joinValName((heading3))}: 32px;
  #{joinValName((heading4))}: 24px;
  #{joinValName((heading5))}: 20px;
  #{joinValName((heading6))}: 18px;
  #{joinValName((heading7))}: 16px;
  #{joinValName((heading8))}: 14px;
  #{joinValName((heading9))}: 12px;

  #{joinValName((font, light))}: 300;
  #{joinValName((font, regular))}: 400;
  #{joinValName((font, semi, bold))}: 600;
  #{joinValName((font, bold))}: 700;

  /* Border Radius */
  #{joinValName((border, radius, none))}: 0;
  #{joinValName((border, radius, base))}: 4px;
  #{joinValName((border, radius, soft))}: 4px;
  #{joinValName((border, radius, rounded))}: 100px;
  #{joinValName((border, radius, circle))}: 100%;

  /* Layout */
  #{joinValName((header, padding))}: 0;
  #{joinValName((header, height))}: 50px;
  #{joinValName((footer, padding))}: 0;
  #{joinValName((footer, height))}: 50px;
  #{joinValName((aside, width))}: 300px;

  /* Shadow */
  #{joinValName((shadow, none))}: none;
  #{joinValName((shadow, xs))}: 0 1px 2px rgba(0, 0, 0, 0.1);
  #{joinValName((shadow, s))}: 0 2px 4px rgba(0, 0, 0, 0.1);
  #{joinValName((shadow, base))}: 0 4px 6px rgba(0, 0, 0, 0.1);
  #{joinValName((shadow, l))}: 0 6px 8px rgba(0, 0, 0, 0.1);
  #{joinValName((shadow, xl))}: 0 8px 10px rgba(0, 0, 0, 0.1);
}

@keyframes rotating {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }
}

* {
  font-family: #{getValName((font, family))};
  box-sizing: border-box;
}

[data-click] {
  cursor: pointer;
}

body {
  padding: 0;
  margin: 0;
  line-height: 1.6;
  font-size: #{getValName((heading8))};
  color: var(--os-color-neutral-10);
}

#{getClassName((is-rotating))} {
  animation: rotating .8s linear infinite;
  display: inline-block;
}

#{getClassName((scroll-bar))} {
  &::-webkit-scrollbar {
    width: #{getValName((space, s))};
    height: #{getValName((space, s))};
  }

  &::-webkit-scrollbar-track {
    border-radius: #{getValName((space, base))};
    background-color: #{getValName((color, neutral, 2))};
  }

  &::-webkit-scrollbar-thumb {
    border-radius: #{getValName((space, base))};
    background-color: #{getValName((color, neutral, 4))};

    &:window-inactive {
      background-color: #{getValName((color, neutral, 5))};
    }
  }
}

#{getClassName((heading1))} {
  font-size: #{getValName((heading1))};
}

#{getClassName((heading2))} {
  font-size: #{getValName((heading2))};
}

#{getClassName((heading3))} {
  font-size: #{getValName((heading3))};
}

#{getClassName((heading4))} {
  font-size: #{getValName((heading4))};
}

#{getClassName((heading5))} {
  font-size: #{getValName((heading5))};
}

#{getClassName((heading6))} {
  font-size: #{getValName((heading6))};
}

#{getClassName((heading7))} {
  font-size: #{getValName((heading7))};
}

#{getClassName((heading8))} {
  font-size: #{getValName((heading8))};
}

#{getClassName((heading9))} {
  font-size: #{getValName((heading9))};
}

#{getClassName((font, light))} {
  font-weight: #{getValName((font, light))};
}

#{getClassName((font, regular))} {
  font-weight: #{getValName((font, regular))};
}

#{getClassName((font, semi, bold))} {
  font-weight: #{getValName((font, semi, bold))};
}

#{getClassName((font, bold))} {
  font-weight: #{getValName((font, bold))};
}

// background-neutral-0
@for $i from 0 through 10 {
  #{getClassName((background, neutral, $i))} {
    background-color: #{getValName((color, neutral, $i))};
  }

  #{getClassName((text, neutral, $i))} {
    color: #{getValName((color, neutral, $i))};
  }
}

@include set-color-class($types);

@include set-space-class($spaceType);