@use '../index' as util;

/** --- Begin document output --- **/

/**
 * Fonts must always be first in a stylesheet
 */
@use '_fonts';

/**
 * Configuration
 */
@include util.colors-config((
  // Base colors
  'white': (#ffffff, (alpha)),
  'black': (#000000, (alpha)),
  'pink': #ff1493,

  // Status colors
  'success': (#00ff00, (alpha)),
  'notice': (#ffff00, (alpha)),
  'error': (#ff0000, (alpha)),
),(
  alpha: (.1,.2,.25),
));
@include util.font-config((
  'default': (
    font-family: (var(--ui-font-default), sans-serif),
    font-size: 16px,
    line-height: 1.2,
  ),
  'mono': (
    font-family: (var(--ui-font-mono), monospace),
    font-size: 1rem,
    line-height: 1.2,
  ),
  'headline': (
    font-family: (var(--ui-font-headline), sans-serif),
    font-size: #{util.abstract-px2rem(20)},
    line-height: 1.2,
  ),
  'headline_at_tablet-desktop': (
    font-size: #{util.abstract-px2rem(24)},
  ),
  'button': (
    font-family: (var(--ui-font-mono), sans-serif),
    font-size: #{util.abstract-px2rem(14)},
    line-height: 1.4,
  ),
));
@include util.text-normalize-config((
  headline-margin: util.space-get('m') 0,
  paragraph-margin: util.space-get('s') 0,
));
@include util.list-spaced-config((
  spaced-margin: util.space-get('s') 0,
  spaced-padding: util.space-get('s') 0 0,
  spaced-inner-margin: 0 0 util.space-get('s'),
  spaced-inner-padding: util.space-get('s') 0 0,
));
@include util.images-fluid-config((
  ratio-max-width: 128px,
  max-width: 128px,
  max-height: 128px,
  picture-margin: 0,
  image-margin: 0,
  text-margin: util.space-get('s') auto,
  broken-color: light-dark(var(--ui-color-black), var(--ui-color-white)),
  broken-background-color: light-dark(var(--ui-color-white), var(--ui-color-black)),
));
@include util.icons-core-config((
  unit: 1.4em,
));
@include util.icons-images-config((
  sqf: 'https://avatars.githubusercontent.com/u/42303555?s=200&v=4',
));
@include util.icons-styled-font-config((
  font-size: 1.4em,
  font-line: 0.85,
));
@include util.button-core-config((
  margin: 0.25rem 0,
  padding: 0.25rem 0.5rem 0.15rem,
  icon-padding: 0.25rem 0.5rem 0.15rem,
  icon-spacing: 0.4rem,
  border: 1px solid currentColor,
  border-radius: 0.35rem,
  min-width: 10rem,
  disabled-opacity: 0.6,
  label-hidden-queries: (
    mobile,
    mobile-classic,
  ),
));
@include util.button-styled-config((
  styled-color: light-dark(var(--ui-color-black), var(--ui-color-white)),
  styled-background: light-dark(var(--ui-color-white), var(--ui-color-black)),
  styled-border: light-dark(var(--ui-color-black), var(--ui-color-white)),
  disabled-color: light-dark(var(--ui-color-black), var(--ui-color-white)),
  disabled-background: light-dark(var(--ui-color-white), var(--ui-color-black)),
  disabled-border: light-dark(var(--ui-color-black), var(--ui-color-white)),
  interactive-color: light-dark(var(--ui-color-pink), var(--ui-color-pink)),
  interactive-background: light-dark(var(--ui-color-white), var(--ui-color-black)),
  interactive-border: light-dark(var(--ui-color-pink), var(--ui-color-pink)),
));
@include util.tooltip-config((
  color-text: light-dark(var(--ui-color-white), var(--ui-color-black)),
  color-background: light-dark(var(--ui-color-black), var(--ui-color-white)),
  padding: 0.25em 0.35em,
  relative-margin: -0.25em 0,
  border-radius: 0.35rem,
  arrow-height: 0.4rem,
  arrow-width: 0.6rem,
  arrow-offset: 0.3rem,
  transition: 0.25s ease,
));
@include util.text-nav-config((
  margin: 1rem 0,
  max-width: 100%,
  item-margin: 0,
  item-padding: 0.25rem,
));
@include util.wrap-config((
  --header: (
    justify-content: space-between,
    align-items: center,
    max-width: 1440px,
    padding: util.space-get('s'),
  ),
  --main: (
    padding: 0 util.space-get('m'),
    max-width: 1440px,
  ),
  --footer: (
    justify-content: space-between,
    align-items: center,
    max-width: 1440px,
    padding: util.space-get('s'),
  ),
  --section: (
    padding: util.space-get('s') util.space-get('m') util.space-get('l'),
  ),
  --vertical: (
    flex-direction: column,
  ),
));
@include util.columns-config((
  count: 1,
  margin: 2rem,
  horizontal: 0,
  spacing: 2rem,
  modifiers: (
    tablet: 2,
    desktop: 3,
  ),
));
@include util.space-config((
  sizes: (
    'xs': 1,
    's': 3,
    'm': 6,
    'l': 9,
    'xl': 14,
  ),
  properties: (
    margin-bottom,
    margin-left,
  ),
));

/**
 * Define root variables
 */
:root {
  color-scheme: light dark;
  --ui-spacing-base: 0.2rem;
  @include fonts.properties;
  @include util.space-properties;

  // Utility custom properties
  @include util.text-normalize-properties;
  @include util.colors-properties;
  @include util.list-normalize-properties;
  @include util.list-spaced-properties;
  @include util.images-fluid-properties;
  @include util.icons-core-properties;
  @include util.icons-images-properties;
  @include util.icons-styled-properties;
  @include util.button-core-properties;
  @include util.button-styled-properties;
  @include util.tooltip-properties;
  @include util.text-nav-properties;
  @include util.wrap-properties;
  @include util.columns-properties;

  // Application specific
}

/**
 * Reset,
 * Text normalize and helpers,
 * Color styles,
 * Font styles,
 * Wrap styles,
 */
@include util.reset-styles;
@include util.text-normalize-styles;
@include util.text-a11y-styles;
@include util.list-normalize-styles;
@include util.list-spaced-styles;
@include util.font-styles;
@include util.wrap-styles;
@include util.columns-styles;
@include util.images-fluid-styles;
@include util.icons-core-styles;
@include util.icons-images-styles;
@include util.icons-styled-styles;
@include util.button-core-styles() {
  @extend .ui-font--button;

  .#{util.$button-class}__label {
    min-height: calc(var(--#{util.$icons-props}size) * var(--#{util.$icons-props}unit));
  }

  &--text {
    &:not(.#{util.$button-styled-class}--static):not(.#{util.$button-styled-class}--disabled):not(:disabled):focus,
    &:not(.#{util.$button-styled-class}--static):not(.#{util.$button-styled-class}--disabled):not(:disabled):hover {
      .#{util.$button-class}__label {
        text-decoration: underline;
      }
    }
  }

  &--icon {
    &-only {
      &.ui-tooltip {
        --ui-tooltip-arrow-offset: 0.85rem;
      }
    }
  }
};
@include util.button-styled-styles;
@include util.button-styled-add('text', (
  styled: (
    color: inherit,
    background: transparent,
    border: transparent,
  ),
  disabled: (
    color: inherit,
    background: transparent,
    border: transparent,
  ),
  interactive: (
    color: var(--ui-color-pink),
    background: transparent,
    border: transparent,
  ),
));
@include util.button-styled-add('success', (
  styled: (
    color: light-dark(var(--ui-color-black), var(--ui-color-white)),
    background: var(--ui-color-success-op-20),
    border: light-dark(var(--ui-color-black), var(--ui-color-white)),
  ),
  disabled: (
    color: light-dark(var(--ui-color-black), var(--ui-color-white)),
    background: var(--ui-color-success-op-25),
    border: light-dark(var(--ui-color-black), var(--ui-color-white)),
  ),
  interactive: (
    color: light-dark(var(--ui-color-pink), var(--ui-color-pink)),
    background: var(--ui-color-success-op-10),
    border: light-dark(var(--ui-color-pink), var(--ui-color-pink)),
  ),
));
@include util.button-styled-add('notice', (
  styled: (
    color: light-dark(var(--ui-color-black), var(--ui-color-white)),
    background: var(--ui-color-notice-op-20),
    border: light-dark(var(--ui-color-black), var(--ui-color-white)),
  ),
  disabled: (
    color: light-dark(var(--ui-color-black), var(--ui-color-white)),
    background: var(--ui-color-notice-op-25),
    border: light-dark(var(--ui-color-black), var(--ui-color-white)),
  ),
  interactive: (
    color: light-dark(var(--ui-color-pink), var(--ui-color-pink)),
    background: var(--ui-color-notice-op-10),
    border: light-dark(var(--ui-color-pink), var(--ui-color-pink)),
  ),
));
@include util.button-styled-add('error', (
  styled: (
    color: light-dark(var(--ui-color-black), var(--ui-color-white)),
    background: var(--ui-color-error-op-20),
    border: light-dark(var(--ui-color-black), var(--ui-color-white)),
  ),
  disabled: (
    color: light-dark(var(--ui-color-black), var(--ui-color-white)),
    background: var(--ui-color-error-op-25),
    border: light-dark(var(--ui-color-black), var(--ui-color-white)),
  ),
  interactive: (
    color: light-dark(var(--ui-color-pink), var(--ui-color-pink)),
    background: var(--ui-color-error-op-10),
    border: light-dark(var(--ui-color-pink), var(--ui-color-pink)),
  ),
));
@include util.tooltip-styles;
@include util.text-nav-styles;
@include util.space-styles;

/**
 * Application styles
 */
html {
  scroll-padding-top: 3.75rem;
}
body {
  color: light-dark(var(--ui-color-black), var(--ui-color-white));
  background-color: light-dark(var(--ui-color-white), var(--ui-color-black));
  @extend .ui-font--default;

  h1, h2, h3, h4, h5, h6 {
    @extend .ui-font--headline;

    span {
      vertical-align: middle;
    }
  }
}
.ui-text {
  max-width: 100%;

  a {
    @include util.mixins-attr-none() {
      color: inherit;
      text-decoration: underline;
      transition: var(--ui-button-transition);

      &:hover,
      &:focus {
        color: var(--ui-color-pink);
      }
    }
  }
}
.ui-header,
.ui-footer {
  --ui-text-nav-margin: 0 0 0 auto;
}
.ui-header {
  z-index: 10;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background-color: inherit;
  border-bottom: #{util.abstract-px2rem(2)} solid currentColor;
}
.ui-footer {
  margin: util.space-get('xl') 0 0;
  border-top: #{util.abstract-px2rem(2)} solid currentColor;
}
code {
  display: inline-block;
  padding: util.space-get('xs') util.space-get('s');
  background-color: light-dark(var(--ui-color-black-op-20), var(--ui-color-white-op-20));
  border-radius: 0.35rem;
}
pre:has(code) {
  display: block;
  white-space: normal;
  width: 100%;
  max-width: 100%;
}
pre code {
  display: block;
  margin: var(--ui-text-normalize-paragraph-margin);
  padding: util.space-get('s') util.space-get('m');
  width: 100%;
  max-width: 100%;
  white-space: pre;
  overflow-x: scroll;
}
.ui-section {
  margin: util.space-get('xl') 0 0;
  padding: util.space-get('m') util.space-get('xs') util.space-get('s');
  background-color: light-dark(var(--ui-color-black-op-10), var(--ui-color-white-op-10));
  border-top: #{util.abstract-px2rem(2)} solid currentColor;
  border-radius: 0.35rem;
}