/* ds.css was initially built with Tailwind, so some things rely on Tailwind's preflight base styles (ex. overriding fonts for all HTML elements) */
/* this preflight.css import is a slightly stripped-down version */
/* read more: https://tailwindcss.com/docs/preflight */
@import './preflight.css';

/* included in preflight.css */
/* @font-face {
  font-family: 'ds-system';
  src: url('./assets/fonts/nitrods-font.ttf') format('truetype');
} */

@layer base {
  :root {
    /* font */
    --font-system: 'ds-system', 'system-ui';

    /* colors */
    --color-ds-darkgrey: #494949;
    --color-ds-info-bg: #282828;

    --color-ds-text-focus: #e36100;
    --color-ds-loading: #fbd300;

    --color-ds-grid-border: #c3c3c3;
    --color-ds-grid-bg: #e3e3e3;

    --color-ds-pictochat-bg: #aaaaaa;
    --color-ds-pictochat-border: #bababa;
    --color-ds-pictochat-enter: #e3f300;
    --color-ds-pictochat-exit: #00fbba;

    /* theme colors */
    --color-ds-slate: #61829a;
    --color-ds-maroon: #ba4900;
    --color-ds-red: #fb0018;
    --color-ds-pink: #fb8afb;
    --color-ds-orange: #fb9200;
    --color-ds-yellow: #f3e300;
    --color-ds-neonyellow: #aafb00;
    --color-ds-lime: #00fb00;
    --color-ds-green: #00a238;
    --color-ds-teal: #49db8a;
    --color-ds-turquoise: #30baf3;
    --color-ds-blue: #0059f3;
    --color-ds-navy: #000092;
    --color-ds-darkpurple: #8a00d3;
    --color-ds-magenta: #d300eb;
    --color-ds-fuschia: #fb0092;

    --width-alert: 412px;
    --width-button: 160px;
    --width-button-lg: 220px;
    --width-button-square: 36px;
    --width-button-radio: 192px;
    --width-radio-label: 62px;
    --width-input: 322px;
    --width-input-lg: 418px;
    --width-input-bumper: 28px;
    --width-details-summary: 446px;
    --width-details-p: 444px;
    --width-pictochat: 468px;
    --width-pictochat-header: 118px;
    --width-info-container: 416px;

    --height-alert: 134px;
    --height-button: 36px;
    --height-button-radio: 62px;
    --height-radio-label: 192px;
    --height-input: 34px;
    --height-input-bumper: 30px;
    --height-details-summary: 34px;
    --height-details-p: 94px;
    --height-bar: 32px;
    --height-bar-lg: 46px;
    --height-pictochat-header: 27px;
    --height-info: 96px;
    --height-info-container: 90px;
    --height-info-label: 26px;
    --height-info-text: 64px;

    --size-info-square: 90px;

    --text-padding: 4px;
  }
}
/* ds theme colors */
.ds-slate {
  background-color: var(--color-ds-slate);
}
.ds-maroon {
  background-color: var(--color-ds-maroon);
}
.ds-red {
  background-color: var(--color-ds-red);
}
.ds-pink {
  background-color: var(--color-ds-pink);
}
.ds-orange {
  background-color: var(--color-ds-orange);
}
.ds-yellow {
  background-color: var(--color-ds-yellow);
}
.ds-neonyellow {
  background-color: var(--color-ds-neonyellow);
}
.ds-lime {
  background-color: var(--color-ds-lime);
}
.ds-green {
  background-color: var(--color-ds-green);
}
.ds-teal {
  background-color: var(--color-ds-teal);
}
.ds-turquoise {
  background-color: var(--color-ds-turquoise);
}
.ds-blue {
  background-color: var(--color-ds-blue);
}
.ds-navy {
  background-color: var(--color-ds-navy);
}
.ds-darkpurple {
  background-color: var(--color-ds-darkpurple);
}
.ds-magenta {
  background-color: var(--color-ds-magenta);
}
.ds-fuschia {
  background-color: var(--color-ds-fuschia);
}

/* 50% opacity colors (good for pictochat header) */
.ds-slate-50 {
  background-color: color-mix(in oklab, var(--color-ds-slate), white 50%);
}
.ds-maroon-50 {
  background-color: color-mix(in oklab, var(--color-ds-maroon), white 50%);
}
.ds-red-50 {
  background-color: color-mix(in oklab, var(--color-ds-red), white 50%);
}
.ds-pink-50 {
  background-color: color-mix(in oklab, var(--color-ds-pink), white 50%);
}
.ds-orange-50 {
  background-color: color-mix(in oklab, var(--color-ds-orange), white 50%);
}
.ds-yellow-50 {
  background-color: color-mix(in oklab, var(--color-ds-yellow), white 50%);
}
.ds-neonyellow-50 {
  background-color: color-mix(in oklab, var(--color-ds-neonyellow), white 50%);
}
.ds-lime-50 {
  background-color: color-mix(in oklab, var(--color-ds-lime), white 50%);
}
.ds-green-50 {
  background-color: color-mix(in oklab, var(--color-ds-green), white 50%);
}
.ds-teal-50 {
  background-color: color-mix(in oklab, var(--color-ds-teal), white 50%);
}
.ds-turquoise-50 {
  background-color: color-mix(in oklab, var(--color-ds-turquoise), white 50%);
}
.ds-blue-50 {
  background-color: color-mix(in oklab, var(--color-ds-blue), white 50%);
}
.ds-navy-50 {
  background-color: color-mix(in oklab, var(--color-ds-navy), white 50%);
}
.ds-darkpurple-50 {
  background-color: color-mix(in oklab, var(--color-ds-darkpurple), white 50%);
}
.ds-magenta-50 {
  background-color: color-mix(in oklab, var(--color-ds-magenta), white 50%);
}
.ds-fuschia-50 {
  background-color: color-mix(in oklab, var(--color-ds-fuschia), white 50%);
}

@layer clip-path {
  /* 1 cut */
  button {
    clip-path: polygon(
      2px 100%,
      2px calc(100% - 2px),
      0 calc(100% - 2px),
      0 2px,
      2px 2px,
      2px 0,
      calc(100% - 2px) 0,
      calc(100% - 2px) 2px,
      100% 2px,
      100% calc(100% - 2px),
      calc(100% - 2px) calc(100% - 2px),
      calc(100% - 2px) 100%
    );
  }

  /* 5 cuts */
  .alert {
    clip-path: polygon(
      /* bottom left */ 10px 100%,
      10px calc(100% - 2px),
      8px calc(100% - 2px),
      8px calc(100% - 4px),
      6px calc(100% - 4px),
      6px calc(100% - 6px),
      4px calc(100% - 6px),
      4px calc(100% - 8px),
      2px calc(100% - 8px),
      2px calc(100% - 10px),
      0 calc(100% - 10px),
      /* top left */ 0 10px,
      2px 10px,
      2px 8px,
      4px 8px,
      4px 6px,
      6px 6px,
      6px 4px,
      8px 4px,
      8px 2px,
      10px 2px,
      10px 0,
      /* top right */ calc(100% - 10px) 0,
      calc(100% - 10px) 2px,
      calc(100% - 8px) 2px,
      calc(100% - 8px) 4px,
      calc(100% - 6px) 4px,
      calc(100% - 6px) 6px,
      calc(100% - 4px) 6px,
      calc(100% - 4px) 8px,
      calc(100% - 2px) 8px,
      calc(100% - 2px) 10px,
      100% 10px,
      /* bottom left */ 100% calc(100% - 10px),
      calc(100% - 2px) calc(100% - 10px),
      calc(100% - 2px) calc(100% - 8px),
      calc(100% - 4px) calc(100% - 8px),
      calc(100% - 4px) calc(100% - 6px),
      calc(100% - 6px) calc(100% - 6px),
      calc(100% - 6px) calc(100% - 4px),
      calc(100% - 8px) calc(100% - 4px),
      calc(100% - 8px) calc(100% - 2px),
      calc(100% - 10px) calc(100% - 2px),
      calc(100% - 10px) 100%
    );
  }

  /* 2 cuts */
  .info-text {
    clip-path: polygon(
      /* bottom left */ 4px 100%,
      4px calc(100% - 2px),
      2px calc(100% - 2px),
      2px calc(100% - 4px),
      0px calc(100% - 4px),
      /* top left */ 0 4px,
      2px 4px,
      2px 2px,
      4px 2px,
      4px 0px,
      /* top right */ calc(100% - 4px) 0,
      calc(100% - 4px) 2px,
      calc(100% - 2px) 2px,
      calc(100% - 2px) 4px,
      calc(100% - 0px) 4px,
      /* bottom left */ 100% calc(100% - 4px),
      calc(100% - 2px) calc(100% - 4px),
      calc(100% - 2px) calc(100% - 2px),
      calc(100% - 4px) calc(100% - 2px),
      calc(100% - 4px) calc(100% - 0px)
    );
  }

  /* 4 cuts */
  .pictochat-window > p,
  .pictochat-window,
  .pictochat-message,
  .pictochat-status,
  .pictochat-board {
    clip-path: polygon(
      /* bottom left */ 8px 100%,
      8px calc(100% - 2px),
      6px calc(100% - 2px),
      6px calc(100% - 4px),
      4px calc(100% - 4px),
      4px calc(100% - 6px),
      2px calc(100% - 6px),
      2px calc(100% - 8px),
      0 calc(100% - 8px),
      /* top left */ 0 8px,
      2px 8px,
      2px 6px,
      4px 6px,
      4px 4px,
      6px 4px,
      6px 2px,
      8px 2px,
      8px 0px,
      /* top right */ calc(100% - 8px) 0,
      calc(100% - 8px) 2px,
      calc(100% - 6px) 2px,
      calc(100% - 6px) 4px,
      calc(100% - 4px) 4px,
      calc(100% - 4px) 6px,
      calc(100% - 2px) 6px,
      calc(100% - 2px) 8px,
      100% 8px,
      /* bottom left */ 100% calc(100% - 8px),
      calc(100% - 2px) calc(100% - 8px),
      calc(100% - 2px) calc(100% - 6px),
      calc(100% - 4px) calc(100% - 6px),
      calc(100% - 4px) calc(100% - 4px),
      calc(100% - 6px) calc(100% - 4px),
      calc(100% - 6px) calc(100% - 2px),
      calc(100% - 8px) calc(100% - 2px),
      calc(100% - 8px) 100%
    );
  }

  /* 3 cuts, only TL / BR */
  .pictochat-message > header {
    clip-path: polygon(
      /* bottom left */ 0px 100%,
      /* top left */ 0 4px,
      2px 4px,
      2px 2px,
      4px 2px,
      4px 0px,
      /* top right */ 100% 0,
      /* bottom left */ 100% calc(100% - 4px),
      calc(100% - 2px) calc(100% - 4px),
      calc(100% - 2px) calc(100% - 2px),
      calc(100% - 4px) calc(100% - 2px),
      calc(100% - 4px) 100%
    );
  }
}

@layer loading {
  .loading-container {
    display: grid;
    width: fit-content;
    height: fit-content;
    flex-shrink: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
  }

  .loading-container > div {
    background-color: var(--color-ds-loading);
    width: 6px;
    height: 6px;
  }

  @keyframes loading-1 {
    12.5%,
    37.5% {
      opacity: 1;
    }
    37.51%,
    75% {
      opacity: 0;
    }
    75.01%,
    100% {
      opacity: 1;
    }
  }

  @keyframes loading-2 {
    0%,
    50% {
      opacity: 1;
    }
    50.01%,
    87.5% {
      opacity: 0;
    }
    87.51%,
    100% {
      opacity: 1;
    }
  }

  @keyframes loading-3 {
    0%,
    62.5% {
      opacity: 1;
    }
    62.51%,
    100% {
      opacity: 0;
    }
  }

  @keyframes loading-6 {
    0%,
    12.5% {
      opacity: 0;
    }
    12.51%,
    75% {
      opacity: 1;
    }
    75.01%,
    100% {
      opacity: 0;
    }
  }

  @keyframes loading-9 {
    0%,
    25% {
      opacity: 0;
    }
    25.51%,
    87.5% {
      opacity: 1;
    }
    87.51%,
    100% {
      opacity: 0;
    }
  }

  @keyframes loading-8 {
    0%,
    37.5% {
      opacity: 0;
    }
    37.51%,
    100% {
      opacity: 1;
    }
  }

  @keyframes loading-7 {
    0%,
    12.5% {
      opacity: 1;
    }
    12.51%,
    50% {
      opacity: 0;
    }
    50.01%,
    100% {
      opacity: 1;
    }
  }

  @keyframes loading-4 {
    0%,
    25% {
      opacity: 1;
    }
    25.01%,
    62.5% {
      opacity: 0;
    }
    62.51%,
    100% {
      opacity: 1;
    }
  }

  .loading-1 {
    animation: 533.33ms infinite loading-1;
  }

  .loading-2 {
    animation: 533.33ms infinite loading-2;
  }

  .loading-3 {
    animation: 533.33ms infinite loading-3;
  }

  .loading-4 {
    animation: 533.33ms infinite loading-4;
  }

  .loading-6 {
    animation: 533.33ms infinite loading-6;
  }

  .loading-7 {
    animation: 533.33ms infinite loading-7;
  }

  .loading-8 {
    animation: 533.33ms infinite loading-8;
  }

  .loading-9 {
    animation: 533.33ms infinite loading-9;
  }
}

/* link styling */
a:link {
  color: var(--color-ds-blue);
  text-decoration-line: underline;

  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:visited {
  color: var(--color-ds-darkpurple);
}

a:hover {
  text-decoration: none;
}

a:any-link > button {
  color: black;
}

/* input & buttons */
button,
input[type='text'] {
  border-style: solid;
  border-width: 2px;
  text-wrap: nowrap;
}

input[type='text'] {
  height: var(--height-input);
  width: var(--width-input);
  /* 6px */
  padding-inline: calc(var(--text-padding) * 1.5);
  border-color: black;
  color: white;
  outline-style: none;
  & *::selection {
    background-color: var(--color-ds-text-focus);
  }
  &::selection {
    background-color: var(--color-ds-text-focus);
  }

  background: url('./assets/svg/input.svg') -1px;
}

input[type='radio'] {
  height: var(--height-button-radio);
  width: var(--width-button-radio);
  appearance: none;
  border-style: solid;
  border-width: 2px;
  border-color: var(--color-ds-darkgrey);
  background-image: url('./assets/svg/button_radio.svg');
}

input[type='radio']:checked {
  background-blend-mode: hard-light;
}

button {
  /* "preload" button hold svg */
  @starting-style {
    background-image: url('./assets/svg/button_active.svg');
  }
  height: var(--width-button-square);
  width: var(--width-button);
  cursor: pointer;
  border-color: var(--color-ds-darkgrey);
  padding-inline: var(--text-padding);
  background-blend-mode: hard-light;
  background-image: url('./assets/svg/button.svg');
}

label {
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
  user-select: none;
}

button:active {
  background-image: url('./assets/svg/button_active.svg');
}

details > summary {
  height: var(--height-details-summary);
  width: var(--width-details-summary);
  border-style: solid;
  border-width: 2px;
  padding-top: 1px;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;

  background-image: url('./assets/svg/details_head.svg');
  list-style: none;
}

details:open > p {
  height: var(--height-details-p);
  width: var(--width-details-p);
  border-inline-style: solid;
  border-inline-width: 2px;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  padding-inline: var(--text-padding);
  padding-top: 1px;
  text-align: center;

  background-image: url('./assets/svg/details.svg');
}

label > span,
legend {
  margin-bottom: 2px;
  padding-left: var(--text-padding);
}

/* classes */

.alert {
  display: flex;
  /* responsive height by default */
  min-height: var(--height-alert);
  width: var(--width-alert);
  align-content: center;
  align-items: center;
  justify-content: space-between;
  /* gap between loading animation and alert content */
  gap: 22px;
  border-style: solid;
  border-width: 16px;
  padding-inline: calc(var(--text-padding));
  text-align: center;
  color: white;
  & *::selection {
    background-color: var(--color-ds-text-focus);
  }
  &::selection {
    background-color: var(--color-ds-text-focus);
  }

  border-image: url('./assets/svg/alert_border.svg') 15;
  background: repeating-linear-gradient(
    black,
    black 2px,
    var(--color-ds-darkgrey) 2px,
    var(--color-ds-darkgrey) 4px
  );
  background-size: 100% 4px;
}

.bar {
  height: var(--height-bar);
  border-bottom-style: solid;
  border-bottom-width: 2px;
  background-blend-mode: hard-light;

  background-image: url('./assets/svg/top_bar.svg');
}

.bar-lg {
  height: var(--height-bar-lg);
  border-bottom-style: solid;
  border-bottom-width: 2px;
  background-blend-mode: hard-light;

  background-image: url('./assets/svg/bottom_bar_top.svg');
}

.bar-lg-reverse {
  height: var(--height-bar-lg);
  border-top-style: solid;
  border-top-width: 2px;
  background-blend-mode: hard-light;

  background-image: url('./assets/svg/bottom_bar_bottom.svg');
  background-position-y: -2px;
}

.button-lg {
  width: var(--width-button-lg);
  background-image: url('./assets/svg/button_lg.svg');
}

.button-square {
  width: var(--width-button-square);
  height: var(--width-button-square);
  background-image: url('./assets/svg/button_square.svg');
}

.button-square:active {
  background-image: url('./assets/svg/button_square_active.svg');
}

.button-lg:active {
  background-image: url('./assets/svg/button_lg_active.svg');
}

button:active:not(:hover),
.button-lg:active:not(:hover),
.button-square:active:not(:hover) {
  background-blend-mode: normal;
}

.ds-grid {
  background:
    repeating-linear-gradient(
      transparent,
      transparent 30px,
      var(--color-ds-grid-border) 30px,
      var(--color-ds-grid-border) 32px
    ),
    repeating-linear-gradient(
      to right,
      transparent,
      transparent 30px,
      var(--color-ds-grid-border) 30px,
      var(--color-ds-grid-border) 32px
    ),
    repeating-linear-gradient(
      white,
      white 2px,
      var(--color-ds-grid-bg) 2px,
      var(--color-ds-grid-bg) 4px
    );
}

.ds-grid-lg {
  background-image: url('./assets/svg/grid_lg.svg');
}

/* .info-wrapper {
  @apply flex pl-1 gap-0.5;
} */

.info {
  display: flex;
  height: var(--height-info);
  /* width: 512px; */
  gap: 2px;
  border-top-style: solid;
  border-top-width: 2px;
  padding-block: 2px;
  /* 4px */
  padding-left: var(--text-padding);
  background-blend-mode: hard-light;

  background-image: url('./assets/svg/info.svg');
}

.info-container {
  height: var(--height-info-container);
  width: var(--width-info-container);
}

.info-label {
  height: var(--height-info-label);
  padding-right: var(--text-padding);
  padding-left: calc(var(--text-padding) * 2);
  text-wrap-mode: nowrap;
}

.info-square {
  display: grid;
  width: var(--size-info-square);
  height: var(--size-info-square);
  place-items: center;
  border-style: solid;
  border-width: 2px;
  background-blend-mode: hard-light;

  background-image: url('./assets/svg/info_square.svg');
}

.info-text {
  height: var(--height-info-text);
  border-style: solid;
  border-width: 4px;
  background-color: var(--color-ds-info-bg);
  padding-inline: var(--text-padding);
  color: white;

  border-image: url('./assets/svg/info_border.svg') 4;
}

/* todo: include this class in docs */
.input-lg {
  min-width: var(--width-input-lg);
}

.input-wrapper {
  display: flex;
  align-items: center;
  gap: 2px;
}

.input-before {
  height: var(--height-input-bumper);
  width: var(--width-input-bumper);
  background-repeat: no-repeat;

  background-image: url('./assets/svg/input_before.svg');
}

.input-after {
  height: var(--height-input-bumper);
  width: var(--width-input-bumper);
  background-repeat: no-repeat;

  background-image: url('./assets/svg/input_after.svg');
}

/* todo: include extra line at top? */
.pictochat-window {
  display: flex;
  flex-direction: column;
  border-style: solid;
  border-width: 8px;
  gap: 4px;
  /* todo: leave optional? */
  /* min-width: calc(0.25rem * 121); */

  background: repeating-linear-gradient(
    var(--color-ds-pictochat-bg),
    var(--color-ds-pictochat-bg) 6px,
    var(--color-ds-pictochat-border) 6px,
    var(--color-ds-pictochat-border) 8px
  );
  border-image: url('./assets/svg/pictochat_border.svg') 8;
}

.pictochat-window > div {
  margin-inline: var(--text-padding);
}

.pictochat-message > header {
  border-style: solid;
  padding-inline: 8px;
  height: var(--height-pictochat-header);
  /* note: should this be allowed to grow? */
  min-width: var(--width-pictochat-header);

  margin-bottom: calc(var(--text-padding) -1);
  /* negative margin offsets text padding */
  margin-left: calc(var(--text-padding) * -2);
  display: inline-block;
  translate: 0 calc(-4px);
  text-wrap: nowrap;

  border-image-source: url('./assets/svg/pictochat_message_header_border.svg');
  border-image-slice: 4;
  border-width: 0px 4px 4px 0px;
}

.pictochat-message {
  position: relative;
  border-style: solid;
  border-width: 8px;
  background-color: white;
  padding-inline: var(--text-padding);
  width: var(--width-pictochat);

  border-image: url('./assets/svg/pictochat_message_border.svg') 8;

  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

/* shrink nested pictochat messages */
.pictochat-message > .pictochat-message,
.pictochat-message > .pictochat-status {
  width: 100%;
}

.pictochat-status {
  border-style: solid;
  border-width: 8px;
  background-color: black;
  color: white;
  padding-inline: var(--text-padding);
  width: var(--width-pictochat);

  border-image: url('./assets/svg/pictochat_status.svg') 8;
}

.pictochat-enter-highlight {
  & *::selection {
    background-color: var(--color-ds-pictochat-enter);
    color: black;
  }
  &::selection {
    background-color: var(--color-ds-pictochat-enter);
    color: black;
  }
}

.pictochat-exit-highlight {
  & *::selection {
    background-color: var(--color-ds-pictochat-exit);
    color: black;
  }
  &::selection {
    background-color: var(--color-ds-pictochat-exit);
    color: black;
  }
}

.radio-button {
  position: relative;
  height: var(--height-button-radio);
  width: var(--width-button-radio);
  background-clip: border-box;
}

.radio-button > label {
  position: absolute;
  top: calc(1 / 2 * 100%);
  z-index: 10;
  width: 100%;
  translate: 0 calc(calc(1 / 2 * 100%) * -1);
  text-align: center;
}