@use "sass:map";
@use "./spacing.scss";
@use "./colors.scss";
@use "./elevation.scss";
@use "./accessibility.scss";

// Padding
@each $name, $spacer in spacing.$spacings {
  .pt-#{$name} {
    padding-top: $spacer;
  }

  .pr-#{$name} {
    padding-right: $spacer;
  }

  .pb-#{$name} {
    padding-bottom: $spacer;
  }

  .pl-#{$name} {
    padding-left: $spacer;
  }

  .p-#{$name} {
    padding: $spacer;
  }

  .px-#{$name} {
    padding-left: $spacer;
    padding-right: $spacer;
  }

  .py-#{$name} {
    padding-top: $spacer;
    padding-bottom: $spacer;
  }
}

// Margin
$additional-margins: (
  "auto": auto,
);
$margins: map.merge($additional-margins, spacing.$spacings);

@each $name, $spacer in $margins {
  .mt-#{$name} {
    margin-top: $spacer;
  }

  .mr-#{$name} {
    margin-right: $spacer;
  }

  .mb-#{$name} {
    margin-bottom: $spacer;
  }

  .ml-#{$name} {
    margin-left: $spacer;
  }

  .m-#{$name} {
    margin: $spacer;
  }

  .mx-#{$name} {
    margin-left: $spacer;
    margin-right: $spacer;
  }

  .my-#{$name} {
    margin-top: $spacer;
    margin-bottom: $spacer;
  }
}

// Border radius
$additional-edges: (
  "round": spacing.$spacing-4,
  "sharp": 0,
  "max": 100vmax,
);
$edges: map.merge($additional-edges, spacing.$spacings);

@each $name, $spacer in $edges {
  .edge-#{$name} {
    border-radius: $spacer;
  }
}

// Color
@each $name, $scale in colors.$neutral-scales {
  @each $level, $color in $scale {
    $contrast-color: map.get(
      colors.$neutral-scales-contrast,
      $name,
      $level
    );

    .bg-#{$name}-#{$level} {
      background-color: $color;
    }

    .fg-#{$name}-#{$level} {
      color: $color;
    }

    .fgc-#{$name}-#{$level} {
      color: $contrast-color;
    }

    .bgc-#{$name}-#{$level} {
      background-color: $color;
      color: $contrast-color;
    }

    .border-#{$name}-#{$level} {
      border: 1px solid $color;
    }

    .border-color-#{$name}-#{$level} {
      border-color: $color;
    }
  }
}

// Basic color values
$basic-colors: (
  "white": black,
  "black": white,
  "transparent": transparent,
);

@each $color, $contrast in $basic-colors {
  .bg-#{$color} {
    background-color: $color;
  }

  .fg-#{$color} {
    color: $color;
  }

  .fgc-#{$color} {
    color: $contrast;
  }

  .bgc-#{$color} {
    background-color: $color;
    color: $contrast;
  }

  .border-#{$color} {
    border: 1px solid $color;
  }

  .border-color-#{$color} {
    border-color: $color;
  }
}

// Borders
@each $style in (solid, dashed, dotted) {
  .border-style-#{$style} {
    border-style: $style;
  }
}

@each $size in (1, 2, 3, 4, 5, 6, 7, 8) {
  .border-#{$size} {
    border-style: solid;
    border-width: #{$size}px;
  }

  .border-width-#{$size} {
    border-width: #{$size}px;
  }
}

// Shadow
@each $shadow in map.keys(elevation.$shadow-sizes) {
  .shadow-#{$shadow} {
    @include elevation.shadow($size: $shadow);
  }
}

// Position
.relative {
  position: relative;
}

/** Utility classes**/
.sr-only {
  @include accessibility.sr-only;
}