@use 'typeface' as *;
@use 'variables' as *;
@use 'material-symbols' as *;
@use 'fluid-space' as *;
@use 'fluid-scale' as *;
@use 'smooth-elevation' as *;
@use 'transitions' as *;
@use 'markdown' as *;

@use '/node_modules/@oruga-ui/theme-oruga/dist/scss/theme-build' as * with (

  $prefix: 'app',
  $table-background-color: var(--app-color-surface),
  $table-border-color: rgba(var(--app-color-on-surface-rgb) / var(--outline-opacity)),
  $table-border-radius: var(--space-m),
  $table-td-padding: var(--space-s) var(--space-m),
  $table-th-padding: var(--space-s) var(--space-m),
  $line-height: 1.3,
  $font-family: "'Open Sans', sans-serif",
  $font-size: var(--step-0),
  
  $control-disabled-opacity: var(--disabled-opacity),
  $control-height: calc(var(--space-2xs) * 5),
  $control-box-shadow-inset: none,

  $button-spacer: 0
);

@import 'normalize.css';
@import 'trickling/lib/style.css';

:root {
  --app-focus: rgba(var(--app-color-primary-variant-rgb) / .3);
  --app-container-padding: var(--space-l);
  --app-perspective: 150px;
}

html {
  scrollbar-color: rgba(var(--app-color-on-surface-rgb) / .4) transparent;
}

.markdown-body {
  width: inherit;

  template {
    width: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

a {
  text-decoration: none;
  color: inherit;
}

figure {
  margin: 0;
}

body.weightmans-viewport,
#app.weightmans-viewport,
#app .weightmans-viewort,
#storybook-root .weightmans-viewport {
  color: var(--app-color-on-background);
  height: 100%;
  box-sizing: border-box;
  *,:after,:before {
      box-sizing: inherit
  }
}

body.weightmans-viewport,
#app.weightmans-viewport,
#app .weightmans-viewort {
  background-color: var(--app-color-background);
}

.weightmans-viewport {
  color-scheme: light dark;

  // &body, &#app, #app, #storybook-root{
  //   color: var(--app-color-on-background);
  //   height: 100%;
  // }

  // &body, &#app, #app{
  //   background-color: var(--app-color-background);
  // }

  &.app-override-noscroll {
    position: static;
    overflow-y: initial;
    overflow-x: initial;
    width: initial;
    bottom: unset;
    top: unset;
  }

  kbd {
    font-size: var(--step--1);
    font-weight: 600;
    background-color: var(--app-color-surface);
    color: rgba(var(--app-color-on-surface-rgb) / 0.6);
    border-radius: 0.2em;
    padding: 0.1em 0.3em;
    border: 1px solid
      rgba(var(--app-color-on-surface-rgb) / var(--outline-opacity));
    border-block-end-width: 2px;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  pre {
    margin-block: 0;
  }

  fieldset {
    padding: 0;
  }

  figure, &:is(figure) {
    margin: 0;
  }

  dl {
    display: flex;
    gap: 0.4em;
    margin: 0;
    dt,
    dd {
      margin: 0;
    }
  }

  a.styled {
    text-decoration: underline;
    text-decoration-color: color-mix(
      in srgb,
      currentColor 80%,
      transparent 100%
    );
    text-underline-offset: 0.2em;
    text-decoration-thickness: 0.1em;
    opacity: 0.8;

    &:hover {
      text-decoration-thickness: 0.15em;
      opacity: 1;
    }

    &:active {
      text-decoration-color: var(--app-color-primary-variant);
    }

    &:focus {
      outline-color: currentColor;
    }
  }

  .app-disabled, [disabled] {
    --app-disabled-opacity: var(--disabled-opacity);
    cursor: default;
    pointer-events: none;
    opacity: var(--app-disabled-opacity);
    * {
      pointer-events: none;
    }
  }

  .app-interactive {
    --app-interactive-hover-filter: brightness(0.95) contrast(1.05) saturate(1.2);
    --app-interactive-hover-shadow: var(--app-elevation-hover);
    --app-interactive-active-filter: brightness(0.9) contrast(1.1) saturate(1.4);
    --app-interactive-active-shadow: var(--app-elevation-active);

    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    transition: filter var(--app-motion-standard), box-shadow var(--app-motion-standard);

    &:hover {
      filter: var(--app-interactive-hover-filter);
      box-shadow: var(--app-interactive-hover-shadow);
      outline: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    }

    &:active, &:focus-within, &:focus-visible {
      filter: var(--app-interactive-active-filter);
      box-shadow: var(--app-interactive-active-shadow);
      outline: 2px solid color-mix(in srgb, currentColor var(--disabled-percentage), transparent);
      outline-offset: 2px;
    }
  }

  [data-v-wave-container-internal="true"] {
    filter: blur(8px);
  }

  @media screen {
    .is-print {
      display: none;
    }
  }

  @media print {
    .is-screen {
      display: none;
    }
  }
}