@use "sass:map";
@use "sass:string";

@use "variables";
@use "mixins";

@layer base {
  *,
  *:after,
  *:before {
    box-sizing: border-box;
    outline-color: var(--theme-primary-default);

    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  *:focus {
    outline: none;
  }

  html {
    font-size: 12px;
  }

  html,
  body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  body {
    background: var(--background-color);
    color: var(--text-trans-default);
    font-family: var(--font-family);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-default);
    line-height: var(--line-height);
  }

  *::-webkit-scrollbar {
    width: 1rem;
    height: 1rem;
    border-radius: 0.6667rem;
  }

  *::-webkit-scrollbar-thumb {
    background-color: var(--theme-gray-light);
    border-radius: 0.6667rem;
    background-clip: padding-box;
    border: 2px solid transparent;
  }

  *::-webkit-scrollbar-track {
    &:hover {
      background-color: var(--theme-gray-lightest);
      border-radius: 0.6667rem;
      background-clip: padding-box;
      border: 2px solid transparent;
    }
  }

  *::-webkit-scrollbar-corner {
    background: transparent;
  }

  hr {
    border: none;
    height: 1px;
    background-color: var(--border-color-lighter);
    width: 100%;
    display: block;
  }

  p {
    margin: 0;
  }

  pre,
  code {
    font-size: var(--font-size-default);
    line-height: var(--line-height);
    margin: 0;
  }

  pre {
    font-family: var(--font-family);
    font-variant-numeric: tabular-nums;
  }

  code {
    font-family: var(--font-family-monospace);
    font-variant-numeric: tabular-nums;
  }

  small {
    vertical-align: top;
  }

  sub {
    display: inline-block;
    overflow: visible;
    height: 0;
  }

  form {
    display: inline;
  }
} // @layer base

@layer utilities {
  .block {
    display: block;
  }

  .inline-block {
    display: inline-block;
  }

  .inline {
    display: inline;
  }

  //-- FONT SIZE

  @each $h in (h1, h2, h3, h4, h5, h6) {
    #{$h} {
      font-size: var(--font-size-#{$h});
      line-height: var(--line-height);
      margin: 0;
    }
  }

  @each $key, $val in map.get(variables.$vars, font-size) {
    .ft-size-#{$key} {
      font-size: var(--font-size-#{$key}) !important;
      line-height: var(--line-height) !important;
    }
  }

  //-- BACKGROUND COLOR

  @each $key, $val in map.get(variables.$vars, theme) {
    @each $key1, $val1 in $val {
      .bg-theme-#{$key}-#{$key1} {
        background: var(--theme-#{$key}-#{$key1}) !important;
      }
    }
  }

  @each $key, $val in map.get(variables.$vars, trans) {
    .bg-trans-#{$key} {
      background: var(--trans-#{$key}) !important;
    }
  }

  .bg-default {
    background: var(--background-color) !important;
  }

  .bg-control {
    background: var(--control-color) !important;
  }

  //-- TEXT COLOR

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

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

  //-- TEXT STYLE

  .tx-line-through {
    text-decoration: line-through;
  }
  .tx-underline {
    text-decoration: underline;
  }

  //-- BORDER

  .bd {
    border: 1px solid !important;
  }

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

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

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

  .bd-none {
    border: none !important;
  }

  .bd-transparent {
    border-color: transparent !important;
  }

  @each $dir in (top, right, bottom, left) {
    $d: string.slice($dir, 1, 1);
    @include mixins.border-direction-variants($dir, $d);
  }

  //-- BORDER WIDTH
  @each $key, $val in map.get(variables.$vars, gap) {
    .bd-width-#{$key} {
      border-width: var(--gap-#{$key}) !important;
    }

    @each $dir in (top, right, bottom, left) {
      $d: string.slice($dir, 1, 1);
      .bd#{$d}-width-#{$key} {
        border-#{$dir}-width: var(--gap-#{$key}) !important;
      }
    }
  }

  //-- BORDER RADIUS

  $radius-dirs: (
    t: (
      top-right,
      top-left,
    ),
    b: (
      bottom-right,
      bottom-left,
    ),
    l: (
      top-left,
      bottom-left,
    ),
    r: (
      top-right,
      bottom-right,
    ),
  );

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

    @each $d, $corners in $radius-dirs {
      .bd#{$d}-radius-#{$key} {
        @each $corner in $corners {
          border-#{$corner}-radius: var(--border-radius-#{$key}) !important;
        }
      }
    }
  }

  //-- PADDING, MARGIN

  @each $key, $val in map.get(variables.$vars, gap) {
    .p-#{$key} {
      padding: var(--gap-#{$key}) !important;
    }

    .m-#{$key} {
      margin: var(--gap-#{$key}) !important;
    }

    .pv-#{$key} {
      padding-top: var(--gap-#{$key}) !important;
      padding-bottom: var(--gap-#{$key}) !important;
    }

    .ph-#{$key} {
      padding-left: var(--gap-#{$key}) !important;
      padding-right: var(--gap-#{$key}) !important;
    }

    .mv-#{$key} {
      margin-top: var(--gap-#{$key}) !important;
      margin-bottom: var(--gap-#{$key}) !important;
    }

    .mh-#{$key} {
      margin-left: var(--gap-#{$key}) !important;
      margin-right: var(--gap-#{$key}) !important;
    }

    .sw-#{$key} {
      width: var(--gap-#{$key}) !important;
    }

    .sh-#{$key} {
      height: var(--gap-#{$key}) !important;
    }

    @each $dir in (top, right, bottom, left) {
      $d: string.slice($dir, 1, 1);

      .p#{$d}-#{$key} {
        padding-#{$dir}: var(--gap-#{$key}) !important;
      }

      .m#{$d}-#{$key} {
        margin-#{$dir}: var(--gap-#{$key}) !important;
      }

      .#{$d}-#{$key} {
        #{$dir}: var(--gap-#{$key}) !important;
      }
    }
  }

  @each $key, $val in map.get(variables.$vars, gap) {
    @each $key1, $val1 in map.get(variables.$vars, gap) {
      .p-#{$key}-#{$key1} {
        padding: var(--gap-#{$key}) var(--gap-#{$key1}) !important;
      }

      .m-#{$key}-#{$key1} {
        margin: var(--gap-#{$key}) var(--gap-#{$key1}) !important;
      }
    }
  }

  //-- TEXT ALIGN

  @each $align in (left, right, center) {
    .tx-#{$align} {
      text-align: #{$align} !important;
    }
  }

  //-- ETC

  .sh-topbar {
    height: var(--topbar-height) !important;
  }

  .sw-sidebar {
    width: var(--sidebar-width) !important;
  }

  .form-control {
    @include mixins.form-control-base();
  }

  .help {
    @include mixins.help();
  }

  .control-header {
    line-height: var(--line-height);
    font-size: var(--font-size-sm);
    color: var(--theme-gray-default);
  }

  .page-header {
    line-height: var(--line-height);
    margin-bottom: var(--gap-sm);
    color: var(--theme-gray-default);

    padding-bottom: var(--gap-xxs);
    font-size: var(--font-size-sm);
  }

  .sticky-top {
    position: sticky !important;
    top: 0;
    z-index: 1;
  }

  .overflow-auto {
    overflow: auto;
  }

  .position-relative {
    position: relative;
  }

  .nowrap {
    white-space: nowrap;
  }

  .fill {
    height: 100%;
    width: 100%;
    overflow: auto;
  }

  @each $key, $val in map.get(variables.$vars, gap) {
    .gap-#{$key} {
      gap: var(--gap-#{$key});
    }
  }

  @each $val in [start, end, center] {
    .main-align-#{$val} {
      justify-content: $val;
    }

    .cross-align-#{$val} {
      align-items: $val;
    }
  }
} // @layer utilities