@use "sass:map";

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

:root {
  --u-state-layer-color: currentColor;
  --u-state-layer-hover-opacity: 8%;
  --u-state-layer-focus-opacity: 12%;
  --u-state-layer-pressed-opacity: 12%;
  --u-state-layer-dragged-opacity: 16%;

  --u-high-emphasis-opacity: 100%;
  --u-low-emphasis-opacity: 75%;
  --u-lower-emphasis-opacity: 50%;

  --u-color-body: #{functions.get-color-var(surface)};
  --u-color-on-body: #{functions.get-color-var(on-surface)};

  --u-font-family: #{variables.$font-family};
  --u-font-monospace: #{variables.$font-mono};
  --u-text-opacity: var(--u-high-emphasis-opacity);
  --u-layout-margin: var(--u-layout-margin-default);
  --u-layout-gutter: var(--u-layout-gutter-default);
  --u-layout-margin-default: var(--u-spacing-medium);
  --u-layout-gutter-default: var(--u-spacing-medium);


  --u-color-high-emphasis: #{functions.get-color-transparency-mix(currentColor, var(--u-high-emphasis-opacity))} !important;
  --u-color-low-emphasis: #{functions.get-color-transparency-mix(currentColor, var(--u-low-emphasis-opacity))} !important;
  --u-color-lower-emphasis: #{functions.get-color-transparency-mix(currentColor, var(--u-lower-emphasis-opacity))} !important;

  @each $name, $value in variables.$font-weights {
    --u-font-weight-#{$name}: #{$value};
  }

  @each $name, $value in variables.$spacings {
    --u-spacing-#{$name}: #{$value};
  }

  @each $name, $value in variables.$shape-corner {
    --u-shape-corner-#{$name}: #{$value};
  }
}

@include mixins.media-breakpoint-up(sm) {

  :root {
    --u-layout-margin-default: var(--u-spacing-large);
    --u-layout-gutter-default: var(--u-spacing-large);
  }
}