/* 
preflight - "better default" styles taken from modern-normalize
ds        - styles
base      - variables to override ds styles
clip-path - clip paths for border images (sometimes edges are off without)
loading   - loading animation
*/
@layer preflight, ds, base, clip-path, loading;

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

@layer preflight {
  /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

  /**
Use a better box model (opinionated). Box sizing should not be inherited. (https://www.oddbird.net/2025/09/04/box-model/)
*/

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

  /**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
3. Prevent adjustments of font size after orientation changes in iOS.
4. Use a more readable tab size (opinionated).
*/

  html {
    font-family:
      var(--font-system), 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
      'Segoe UI Emoji'; /* 1 */
    -webkit-text-size-adjust: 100%; /* 3 */
    tab-size: 4; /* 4 */
  }
  /**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
  }

  /**
Correct the inability to style clickable types in iOS and Safari.
*/

  button,
  [type='button'],
  [type='reset'],
  [type='submit'] {
    -webkit-appearance: button;
  }

  /**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

  legend {
    padding: 0;
  }

  /**
Add the correct vertical alignment in Chrome and Firefox.
*/

  progress {
    vertical-align: baseline;
  }

  /*
Add the correct display in Chrome and Safari.
*/

  summary {
    display: list-item;
  }
}

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

    /* colors */
    --color-ds-darkgrey: #494949;
    --color-ds-button-default: #808080;
    --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;
    /* exact is 36px */
    --height-pictochat-header: 34px;
    --height-info: 96px;
    --height-info-container: 90px;
    --height-info-label: 26px;
    --height-info-text: 64px;

    --size-info-square: 90px;

    --text-padding: 4px;

    font-size: 17px;
    line-height: 26px;
    text-rendering: geometricPrecision;

    /* background color classes */
    /* 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;
  }
}

@layer ds {
  /* 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 {
    background-color: var(--color-ds-button-default);
    /* "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;

    /* todo: use inset border and repeating gradient for details p */
    /* "preload" details open svg */
    @starting-style {
      background-image: url('./assets/svg/details.svg');
    }

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

  details:open > p {
    margin: 0px;
    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;
    /* no border-image, so needs more text padding */
    padding-inline: calc(var(--text-padding) * 2);
    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 {
    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);
    margin-bottom: -4px;
    text-wrap: nowrap;
    align-content: end;

    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;
  }
}