@use "sass:map";
@use "variables" as *;

// The CSS variables are used in the dynamic-css.js file in order to reuse the same SCSS
// variable presets.
:root {
  --w-base-increment: #{$base-increment};
  --w-css-scope: #{$css-scope};
  --w-contrast-bg-o025-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 2.5%, transparent)};
  --w-contrast-bg-o05-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 5%, transparent)};
  --w-contrast-bg-o1-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 10%, transparent)};
  --w-contrast-bg-o2-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 20%, transparent)};
  --w-contrast-bg-o3-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 30%, transparent)};
  --w-contrast-bg-o4-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 40%, transparent)};
  --w-contrast-bg-o5-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 50%, transparent)};
  --w-contrast-bg-o6-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 60%, transparent)};
  --w-contrast-bg-o7-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 70%, transparent)};
  --w-contrast-bg-o8-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 80%, transparent)};
  --w-contrast-bg-o9-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 90%, transparent)};

  background-color: var(--w-base-bg-color);
  color: var(--w-base-color);
}

:root[data-theme="light"] {
  --w-base-bg-color: #{map.get($theme-light, 'base-bg-color')};
  --w-base-color: #{map.get($theme-light, 'base-color')};
  --w-contrast-bg-color: #{map.get($theme-light, 'contrast-bg-color')};
  --w-contrast-color: #{map.get($theme-light, 'contrast-color')};
  --w-caption-color: #{map.get($theme-light, 'caption-color')};
  --w-disabled-color: #{map.get($theme-light, 'disabled-color')};
}

:root[data-theme="dark"] {
  --w-base-bg-color: #{map.get($theme-dark, 'base-bg-color')};
  --w-base-color: #{map.get($theme-dark, 'base-color')};
  --w-contrast-bg-color: #{map.get($theme-dark, 'contrast-bg-color')};
  --w-contrast-color: #{map.get($theme-dark, 'contrast-color')};
  --w-caption-color: #{map.get($theme-dark, 'caption-color')};
  --w-disabled-color: #{map.get($theme-dark, 'disabled-color')};
}

* {
  outline: none;
  margin: 0;
  padding: 0;
}

body {overflow-x: hidden;}

a {text-decoration: none;}

.w-app {
  position: relative; // Make the .w-app a referential for tooltips / menus.
  display: flex;
  flex-direction: column;
  min-height: 100dvh;

  &, *, :before, :after {box-sizing: border-box;}

  &.row {flex-direction: row;}
  &.d-block {display: block;}
  &.align-center {align-items: center;}
  &.align-end {align-items: flex-end;}
  &.justify-center {justify-content: center;}
  &.justify-end {justify-content: flex-end;}
  &.justify-space-between {justify-content: space-between;}
  &.justify-space-around {justify-content: space-around;}
  &.justify-space-evenly {justify-content: space-evenly;}
  &.text-center {text-align: center;}
  &.text-right {text-align: right;}
}

.w-main {
  padding-left: 3 * $base-increment;
  padding-right: 3 * $base-increment;
}

// Structure classes.
// ----------------------------------------------
.content-wrap {
  position: relative;
  padding: $layout-padding;
}
