/*
 * Animation - keyframes
 */
@keyframes fade-in {
  to { opacity: 1 }
}
@keyframes fade-out {
  to { opacity: 0 }
}
@keyframes scale-up {
  to { transform: scale(1.25) }
}
@keyframes scale-down {
  to { transform: scale(.75) }
}
@keyframes slide-out-up {
  to { transform: translateY(-100%) }
}
@keyframes slide-out-down {
  to { transform: translateY(100%) }
}
@keyframes slide-out-right {
  to { transform: translateX(100%) }
}
@keyframes slide-out-left {
  to { transform: translateX(-100%) }
}
@keyframes slide-in-up {
  from { transform: translateY(100%) }
}
@keyframes slide-in-down {
  from { transform: translateY(-100%) }
}
@keyframes slide-in-right {
  from { transform: translateX(-100%) }
}
@keyframes slide-in-left {
  from { transform: translateX(100%) }
}
@keyframes shake-x {
  0%, 100% { transform: translateX(0%) }
  20% { transform: translateX(-5%) }
  40% { transform: translateX(5%) }
  60% { transform: translateX(-5%) }
  80% { transform: translateX(5%) }
}
@keyframes shake-y {
  0%, 100% { transform: translateY(0%) }
  20% { transform: translateY(-5%) }
  40% { transform: translateY(5%) }
  60% { transform: translateY(-5%) }
  80% { transform: translateY(5%) }
}
@keyframes shake-z {
  0%, 100% { transform: rotate(0deg) }
  20% { transform: rotate(-2deg) }
  40% { transform: rotate(2deg) }
  60% { transform: rotate(-2deg) }
  80% { transform: rotate(2deg) }
}
@keyframes spin {
  to { transform: rotate(1turn) }
}
@keyframes ping {
  90%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes blink {
  0%, 100% {
    opacity: 1
  }
  50% {
    opacity: .5
  }
}
@keyframes float {
  50% { transform: translateY(-25%) }
}
@keyframes bounce {
  25% { transform: translateY(-20%) }
  40% { transform: translateY(-3%) }
  0%, 60%, 100% { transform: translateY(0) }
}
@keyframes pulse {
  50% { transform: scale(.9,.9) }
}

/*
 * Enable view transitions
 */
@view-transition {
  navigation: auto;
}

@layer view-transitions {
  :root {
    view-transition-name: none;
  }

  ::view-transition {
    pointer-events: none;
  }

  /* Set defaults for view transition animations */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
  	animation-duration: 400ms;
  	animation-fill-mode: forwards; /* important if mixing durations */
  	animation-timing-function: var(--ease-2);
  }

  ::view-transition-group(locale-active-bg) {
    z-index: 0;
    animation-duration: 160ms;
    animation-timing-function: var(--ease-spring-2);
  }

  ::view-transition-group(locale-label-en),
  ::view-transition-group(locale-label-vi) {
    z-index: 1;
    animation: none;
  }

  :active-view-transition-type(locale-change) {
    .switch-controls {
      view-transition-name: locale-switch;
      view-transition-group: contain;

      button,
      a {
        .label[data-locale="en"] {
          view-transition-name: locale-label-en;
        }
        .label[data-locale="vi"] {
          view-transition-name: locale-label-vi;
        }
      }
    }
    .switch-background-item[data-active] {
      /* Only the active item claims the name, so the browser
        can morph it to wherever it lands next. */
      view-transition-name: locale-active-bg;
    }
  }

  @scope (.locale-selector-component) to ([data-component]) {
    :active-view-transition-type(locale-change-scoped) {
      .switch-background-item[data-active] {
        /* Only the active item claims the name, so the browser
          can morph it to wherever it lands next. */
        view-transition-name: locale-active-bg;
      }
    }
  }
}

@layer reduced-motion {
  @media (prefers-reduced-motion) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation: none !important;
    }
  }
}

@layer theme {
  :where(html) {
    /*
     * Animation
     */
    --animation-fade-in: fade-in .5s var(--ease-3);
    --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
    --animation-fade-out: fade-out .5s var(--ease-3);
    --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
    --animation-scale-up: scale-up .5s var(--ease-3);
    --animation-scale-down: scale-down .5s var(--ease-3);
    --animation-slide-out-up: slide-out-up .5s var(--ease-3);
    --animation-slide-out-down: slide-out-down .5s var(--ease-3);
    --animation-slide-out-right: slide-out-right .5s var(--ease-3);
    --animation-slide-out-left: slide-out-left .5s var(--ease-3);
    --animation-slide-in-up: slide-in-up .5s var(--ease-3);
    --animation-slide-in-down: slide-in-down .5s var(--ease-3);
    --animation-slide-in-right: slide-in-right .5s var(--ease-3);
    --animation-slide-in-left: slide-in-left .5s var(--ease-3);
    --animation-shake-x: shake-x .75s var(--ease-out-5);
    --animation-shake-y: shake-y .75s var(--ease-out-5);
    --animation-shake-z: shake-z 1s var(--ease-in-out-3);
    --animation-spin: spin 2s linear infinite;
    --animation-ping: ping 5s var(--ease-out-3) infinite;
    --animation-blink: blink 1s var(--ease-out-3) infinite;
    --animation-float: float 3s var(--ease-in-out-3) infinite;
    --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
    --animation-pulse: pulse 2s var(--ease-out-3) infinite;

    /*
     * Transitions
     */
    --ease-1: cubic-bezier(.25, 0, .5, 1);
    --ease-2: cubic-bezier(.25, 0, .4, 1);
    --ease-3: cubic-bezier(.25, 0, .3, 1);
    --ease-4: cubic-bezier(.25, 0, .2, 1);
    --ease-5: cubic-bezier(.25, 0, .1, 1);
    --ease-in-1: cubic-bezier(.25, 0, 1, 1);
    --ease-in-2: cubic-bezier(.50, 0, 1, 1);
    --ease-in-3: cubic-bezier(.70, 0, 1, 1);
    --ease-in-4: cubic-bezier(.90, 0, 1, 1);
    --ease-in-5: cubic-bezier(1, 0, 1, 1);
    --ease-out-1: cubic-bezier(0, 0, .75, 1);
    --ease-out-2: cubic-bezier(0, 0, .50, 1);
    --ease-out-3: cubic-bezier(0, 0, .3, 1);
    --ease-out-4: cubic-bezier(0, 0, .1, 1);
    --ease-out-5: cubic-bezier(0, 0, 0, 1);
    --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
    --ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
    --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
    --ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
    --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
    --ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25);
    --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25);
    --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25);
    --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25);
    --ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25);
    --ease-elastic-in-1: cubic-bezier(.5, -0.25, .75, 1);
    --ease-elastic-in-2: cubic-bezier(.5, -0.50, .75, 1);
    --ease-elastic-in-3: cubic-bezier(.5, -0.75, .75, 1);
    --ease-elastic-in-4: cubic-bezier(.5, -1.00, .75, 1);
    --ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1);
    --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5);
    --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5);
    --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5);
    --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5);
    --ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5);
    --ease-step-1: steps(2);
    --ease-step-2: steps(3);
    --ease-step-3: steps(4);
    --ease-step-4: steps(7);
    --ease-step-5: steps(10);
    --ease-elastic-1: var(--ease-elastic-out-1);
    --ease-elastic-2: var(--ease-elastic-out-2);
    --ease-elastic-3: var(--ease-elastic-out-3);
    --ease-elastic-4: var(--ease-elastic-out-4);
    --ease-elastic-5: var(--ease-elastic-out-5);
    --ease-squish-1: var(--ease-elastic-in-out-1);
    --ease-squish-2: var(--ease-elastic-in-out-2);
    --ease-squish-3: var(--ease-elastic-in-out-3);
    --ease-squish-4: var(--ease-elastic-in-out-4);
    --ease-squish-5: var(--ease-elastic-in-out-5);
    --ease-spring-1: linear(
      0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
      0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
      1.001
    );
    --ease-spring-2: linear(
      0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962,
      1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%,
      0.999 61.6%, 0.995 71.2%, 1
    );
    --ease-spring-3: linear(
      0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077,
      1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
      1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
      0.997 69.8%, 1.003 76.9%, 1
    );
    --ease-spring-4: linear(
      0, 0.009, 0.037 1.7%, 0.153 3.6%, 0.776 10.3%, 1.001, 1.142 16%, 1.185,
      1.209 19%, 1.215 19.9% 20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, 0.973,
      0.955 39.2%, 0.953 41.1%, 0.957 43.3%, 0.998 53.3%, 1.009 59.1% 63.7%,
      0.998 78.9%, 1
    );
    --ease-spring-5: linear(
      0, 0.01, 0.04 1.6%, 0.161 3.3%, 0.816 9.4%, 1.046, 1.189 14.4%, 1.231,
      1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, 0.999 29.4%,
      0.955 32.1%, 0.942, 0.935 34.9%, 0.933, 0.939 38.4%, 1 47.3%, 1.011,
      1.017 52.6%, 1.016 56.4%, 1 65.2%, 0.996 70.2%, 1.001 87.2%, 1
    );
    --ease-bounce-1: linear(
      0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141, 0.191, 0.25, 0.316, 0.391 36.8%,
      0.563, 0.766, 1 58.8%, 0.946, 0.908 69.1%, 0.895, 0.885, 0.879, 0.878, 0.879,
      0.885, 0.895, 0.908 89.7%, 0.946, 1
    );
    --ease-bounce-2: linear(
      0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 15.1%, 0.25, 0.391, 0.562, 0.765,
      1, 0.892 45.2%, 0.849, 0.815, 0.788, 0.769, 0.757, 0.753, 0.757, 0.769, 0.788,
      0.815, 0.85, 0.892 75.2%, 1 80.2%, 0.973, 0.954, 0.943, 0.939, 0.943, 0.954,
      0.973, 1
    );
    --ease-bounce-3: linear(
      0, 0.004, 0.016, 0.035, 0.062, 0.098, 0.141 11.4%, 0.25, 0.39, 0.562, 0.764,
      1 30.3%, 0.847 34.8%, 0.787, 0.737, 0.699, 0.672, 0.655, 0.65, 0.656, 0.672,
      0.699, 0.738, 0.787, 0.847 61.7%, 1 66.2%, 0.946, 0.908, 0.885 74.2%, 0.879,
      0.878, 0.879, 0.885 79.5%, 0.908, 0.946, 1 87.4%, 0.981, 0.968, 0.96, 0.957,
      0.96, 0.968, 0.981, 1
    );
    --ease-bounce-4: linear(
      0, 0.004, 0.016 3%, 0.062, 0.141, 0.25, 0.391, 0.562 18.2%, 1 24.3%, 0.81,
      0.676 32.3%, 0.629, 0.595, 0.575, 0.568, 0.575, 0.595, 0.629, 0.676 48.2%,
      0.811, 1 56.2%, 0.918, 0.86, 0.825, 0.814, 0.825, 0.86, 0.918, 1 77.2%,
      0.94 80.6%, 0.925, 0.92, 0.925, 0.94 87.5%, 1 90.9%, 0.974, 0.965, 0.974, 1
    );
    --ease-bounce-5: linear(
      0, 0.004, 0.016 2.5%, 0.063, 0.141, 0.25 10.1%, 0.562, 1 20.2%, 0.783, 0.627,
      0.534 30.9%, 0.511, 0.503, 0.511, 0.534 38%, 0.627, 0.782, 1 48.7%, 0.892,
      0.815, 0.769 56.3%, 0.757, 0.753, 0.757, 0.769 61.3%, 0.815, 0.892, 1 68.8%,
      0.908 72.4%, 0.885, 0.878, 0.885, 0.908 79.4%, 1 83%, 0.954 85.5%, 0.943,
      0.939, 0.943, 0.954 90.5%, 1 93%, 0.977, 0.97, 0.977, 1
    );
    --ease-circ-in: cubic-bezier(.6,.04,.98,.335);
    --ease-circ-in-out: cubic-bezier(.785,.135,.15,.86);
    --ease-circ-out: cubic-bezier(.075,.82,.165,1);
    --ease-cubic-in: cubic-bezier(.55,.055,.675,.19);
    --ease-cubic-in-out: cubic-bezier(.645,.045,.355,1);
    --ease-cubic-out: cubic-bezier(.215,.61,.355,1);
    --ease-expo-in: cubic-bezier(.95,.05,.795,.035);
    --ease-expo-in-out: cubic-bezier(1,0,0,1);
    --ease-expo-out: cubic-bezier(.19,1,.22,1);
    --ease-quad-in: cubic-bezier(.55,.085,.68,.53);
    --ease-quad-in-out: cubic-bezier(.455,.03,.515,.955);
    --ease-quad-out: cubic-bezier(.25,.46,.45,.94);
    --ease-quart-in: cubic-bezier(.895,.03,.685,.22);
    --ease-quart-in-out: cubic-bezier(.77,0,.175,1);
    --ease-quart-out: cubic-bezier(.165,.84,.44,1);
    --ease-quint-in: cubic-bezier(.755,.05,.855,.06);
    --ease-quint-in-out: cubic-bezier(.86,0,.07,1);
    --ease-quint-out: cubic-bezier(.23,1,.32,1);
    --ease-sine-in: cubic-bezier(.47,0,.745,.715);
    --ease-sine-in-out: cubic-bezier(.445,.05,.55,.95);
    --ease-sine-out: cubic-bezier(.39,.575,.565,1);

    /*
     * Borders
     */
    --border-size-1: 1px;
    --border-size-2: 2px;
    --border-size-3: 5px;
    --border-size-4: 10px;
    --border-size-5: 25px;
    --radius-1: 2px;
    --radius-2: 5px;
    --radius-3: 1rem;
    --radius-4: 2rem;
    --radius-5: 4rem;
    --radius-6: 8rem;
    --radius-drawn-1: 255px 15px 225px 15px / 15px 225px 15px 255px;
    --radius-drawn-2: 125px 10px 20px 185px / 25px 205px 205px 25px;
    --radius-drawn-3: 15px 255px 15px 225px / 225px 15px 255px 15px;
    --radius-drawn-4: 15px 25px 155px 25px / 225px 150px 25px 115px;
    --radius-drawn-5: 250px 25px 15px 20px / 15px 80px 105px 115px;
    --radius-drawn-6: 28px 100px 20px 15px / 150px 30px 205px 225px;
    --radius-round: 1e5px;
    --radius-blob-1: 30% 70% 70% 30% / 53% 30% 70% 47%;
    --radius-blob-2: 53% 47% 34% 66% / 63% 46% 54% 37%;
    --radius-blob-3: 37% 63% 56% 44% / 49% 56% 44% 51%;
    --radius-blob-4: 63% 37% 37% 63% / 43% 37% 63% 57%;
    --radius-blob-5: 49% 51% 48% 52% / 57% 44% 56% 43%;
    --radius-conditional-1: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1));
    --radius-conditional-2: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-2));
    --radius-conditional-3: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-3));
    --radius-conditional-4: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-4));
    --radius-conditional-5: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-5));
    --radius-conditional-6: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-6));

    /*
     * Colors
     */
    --color-neutral-1: oklch(13% 0.006 264);
    --color-neutral-2: oklch(15% 0.006 264);
    --color-neutral-3: oklch(21% 0.003 264);
    --color-neutral-4: oklch(31% 0 0);
    --color-neutral-5: oklch(72% 0 0);
    --color-neutral-6: oklch(82% 0.01 256);
    --color-neutral-7: oklch(90% 0 0);
    --color-neutral-8: oklch(98% 0 0);

    --color-pink: oklch(0.6702 0.2342 2.76);
    --color-red: oklch(0.699 0.166 17);

    --palette-accent-hue: 220;
    --palette-accent-chroma: 1;

    --color-accent-1: oklch(18% 0.03 var(--palette-accent-hue));
    --color-accent-2: oklch(27% 0.08 var(--palette-accent-hue));
    --color-accent-3: oklch(37% 0.12 var(--palette-accent-hue));
    --color-accent-4: oklch(62% 0.18 var(--palette-accent-hue));
    --color-accent-5: oklch(68% 0.17 var(--palette-accent-hue));
    --color-accent-6: oklch(84% 0.1 var(--palette-accent-hue));

    --color-accent-contrast: var(--color-neutral-8);
    --color-page-background: var(--color-neutral-1);
    --color-text-body: var(--color-neutral-6);
    --color-link: var(--color-neutral-7);
    --color-menu-link: var(--color-neutral-5);
    --color-link-hover: var(--color-neutral-5);

    --transition-link: color 160ms var(--ease-quad-out);

    /*
     * Spacing
     */
  }
}

@layer icons {
  .icon {
    flex-shrink: 0;

    &.size-small {
      block-size: 0.75rem;
      inline-size: 0.75rem;
    }
    &.size-medium {
      block-size: 1rem;
      inline-size: 1rem;
    }
    &.size-large {
      block-size: 1.5rem;
      inline-size: 1.5rem;
    }
  }
}

@layer core-components {
  @scope (.button-component) to ([data-component]) {
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    transition: background-color 160ms var(--ease-quad-out);

    &:where([data-size='small']) {
      padding-block: 0.375rem;
      padding-inline: 0.75rem;
    }

    &:where([data-size='medium']) {
      padding-block: 0.5rem;
      padding-inline: 1rem;
    }

    &:where([data-size='large']) {
      padding-block: 0.75rem;
      padding-inline: 1.25rem;
    }

    &:where([data-variant='primary']) {
      color: var(--color-accent-contrast);
      background-color: var(--color-accent-4);
      border-radius: 0.5rem;

      &:where(:not(:disabled)):hover {
        background-color: var(--color-accent-5);
      }

      &:disabled {
        color: var(--color-neutral-5);
        background-color: var(--color-neutral-3);
        cursor: not-allowed;
      }
    }

    /*&:where([data-variant='outlined']) {
      color: var(--color-accent-contrast);
      border: 1px solid var(--color-neutral-4);
      border-radius: 0.375rem;

      &:where(:not(:disabled)):hover {
        background-color: var(--color-accent-2);
      }

      &:disabled {
        color: var(--color-neutral-5);
        border: 1px solid var(--color-neutral-4);
        cursor: not-allowed;
      }
    }*/

    &:where([data-variant='outlined']) {
      color: var(--color-accent-contrast);
      border-radius: 0.5rem;
      border: 1px solid var(--color-neutral-4);

      &:where(:not(:disabled)):hover {
        background-color: var(--color-neutral-3);
      }
    }

    &:where([data-variant='soft']) {
      color: var(--color-accent-contrast);
      border-radius: var(--radius-round);
      border: 1px solid var(--color-neutral-3);

      &:where(:not(:disabled)):hover {
        background-color: var(--color-neutral-3);
        border: 1px solid transparent;
      }
    }

    &:where([data-center]) {
      justify-content: center;
    }
  }

  @scope (.link-component) to ([data-component]) {
    color: var(--color-link);
    transition: var(--transition-link);

    &:hover {
      color: var(--color-link-hover);
    }
  }

  @scope (.input-component) to ([data-component]) {
    --border-width: 1px;
    --radius-factor: 1;
    --radius-2: 6px;

    --radius: calc(var(--radius-2) - var(--border-width));

    &:where(input) {
      box-shadow: inset 0 0 0 var(--border-width) var(--color-neutral-3);
      border-radius: var(--radius);
      width: 100%;
      padding-block: 0.75rem;
      padding-inline: 1rem;

      &:focus {
        box-shadow: inset 0 0 0 var(--border-width) var(--color-accent-4);
        outline: none;
      }
    }
  }

  @scope (.label-component) to ([data-component]) {
    font-size: 1.125rem;
    color: var(--color-neutral-6);
  }

  @scope (.errors-component) to ([data-component]) {
    font-size: .9375rem;
    min-height: 1.5em;
    color: var(--color-red);
  }

  @scope (.select-component) to ([data-component]) {
    :scope {
      --border-width: 1px;
      --radius-factor: 1;
      --radius-2: 6px;

      --radius: calc(var(--radius-2) - var(--border-width));
    }

    button svg {
      display: none;
    }

    @supports not (appearance: base-select) {
      background-color: var(--color-neutral-2);
      border: var(--border-width) solid var(--color-neutral-3);
    }

    @supports (appearance: base-select) {
      option {
        padding-block: 0.25rem;
        padding-inline: 0.5rem;
        border-radius: var(--radius);
        color: var(--color-link);

        &:hover {
          background-color: var(--color-accent-3);
        }

        & + & {
          margin-top: 2px;
        }
      }

      :scope, :scope::picker(select) {
        appearance: base-select;
      }

      :scope::picker(select) {
        border-radius: var(--radius);
        background-color: var(--color-neutral-2);
        border: none;
        border: var(--border-width) solid var(--color-neutral-3);
        gap: 2px;
        color: var(--color-text-body);
        padding: 0.5rem;
      }

      button {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var(--color-link);
        background-color: var(--color-neutral-1);
        padding-block: 4px;
        padding-inline: 12px;
        gap: 0.5em;
        box-shadow: inset 0 0 0 var(--border-width) var(--color-neutral-3);
        border-radius: var(--radius);
        text-overflow: ellipsis;
      }

      :scope::picker-icon {
        display: none;
      }

      button svg {
        display: block;
        width: 9px;
        height: 9px;
      }
    }
  }

  @scope (.field-component) to ([data-component]) {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    label {
      display: contents;
    }
  }

  @scope (.header-component) to ([data-component]) {
    padding-block-end: 1rem;

    :scope[data-actions] {
      display: flex;
      align-self: center;
      justify-content: space-between;
      gap: 1.5rem;
    }

    .title {
      font-size: 2rem;
      font-weight: 600;
      line-height: 1.5;
      color: var(--color-accent-contrast);
    }

    .subtitle {
      font-size: 1rem;
      color: var(--color-text-body);
    }

    .actions {
      align-self: center;
      flex: none;
      display: flex;
      gap: 1.5rem;
    }
  }

  @scope (.flash-group-component) to ([data-component]) {
    position: fixed;
    z-index: 50;
    bottom: 1rem;
    right: 1rem;

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  @scope (.flash-component) to ([data-component]) {
    inline-size: 20rem;
    max-inline-size: 20rem;
  }

  @scope (.alert-component) to ([data-component]) {
    --alert-background-color: oklch(from var(--color-neutral-2) l c h / 90%);
    --alert-close-button-padding: 1rem;
    --alert-padding-block: 1.25rem;
    --alert-padding-inline: 1.75rem;

    min-inline-size: 20rem;
    inline-size: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-block: var(--alert-padding-block);
    padding-inline: var(--alert-padding-inline);

    background-color: var(--alert-background-color);
    border-radius: 1rem;
    border: 1px solid var(--alert-border-color);
    color: var(--color-text-body);

    .content {
      flex: 1 1 auto;
      font-size: 0.875rem;

      > p {
        text-wrap: wrap;
      }

      a {
        text-decoration: underline;
      }
    }

    @media (min-width: 640px) {
      width: 24rem;
      max-width: 24rem;
    }

    &:where([data-kind='info']) {
      --alert-border-color: var(--color-accent-3);
    }
    &:where([data-kind='error']) {
      --alert-border-color: var(--color-pink);
    }

    .icon {
      flex: 0 0 auto;
    }

    .close-button {
      margin-inline-start: auto;
      cursor: pointer;
      flex: 0 0 auto;
      padding: var(--alert-close-button-padding);
      margin: calc(var(--alert-close-button-padding) * -1);
      color: var(--color-accent-contrast);
      border-radius: var(--radius-round);

      &:hover {
        background-color: var(--color-neutral-2);
      }
    }
  }

  @scope (.table-component) to ([data-component]) {
    width: 100%;
    table-layout: auto;

    th,
    td {
      padding-block: 1rem;
      padding-inline: 1rem;
    }

    tbody,
    tbody > tr + tr {
      border-top: 1px solid var(--color-neutral-3);
    }

    thead {
      text-align: left;
      font-weight: bold;
    }

    .sr-only {
     	position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }
  }
}

@layer components {
  @scope (.container-component) to ([data-component]) {
    display: flex;
    justify-content: center;
    padding-inline: 24px;

    .inner {
      flex: 1 1 100%;
      max-width: 1282px;
    }

    &:where([data-margin-top]) {
      margin-top: 2rem;
    }
  }

  @scope (.navbar-component) to ([data-component]) {
    display: flex;
    justify-content: center;
    background-color: var(--color-neutral-2);
    border-bottom: 1px solid var(--color-neutral-3);
    padding-inline: 1.5rem;

    .inner {
      flex: 1 1 100%;
      max-width: 1282px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-block: 0.75rem;
      padding-inline: 1rem;
      gap: 1rem;
    }

    .logo {
      margin-right: auto;
    }
  }

  @scope (.locale-selector-component) to ([data-component]) {
    --padding: 4px;

    .switch-wrapper {
      position: relative;
      block-size: 42px;
      inline-size: 120px;
    }
    .switch-controls {
      position: absolute;
      inset: 0;
    }
    .switch-background {
      position: absolute;
      inset: 0;
      display: flex;
      justify-content: stretch;
      padding: var(--padding);
    }
    .switch-background-item {
      flex-basis: 50%;
      background-color: var(--color-accent-3);
      border-radius: calc(var(--radius-3) - var(--padding));

      opacity: 0;

      &[data-active] {
        opacity: 1;
      }
    }

    .switch {
      display: flex;
      border: 1px solid var(--color-neutral-3);
      border-radius: var(--radius-3);
      overflow: hidden;
      padding: var(--padding);

      span[data-active] {
        cursor: default;
        user-select: none;
      }

      button,
      a {
        cursor: default;
        border-radius: calc(var(--radius-3) - var(--padding));
        overflow: hidden;
        flex: 1 0 3rem;

        .label {
          letter-spacing: 0.1em;
          padding-block: 0.25rem;
          padding-inline: 0.5rem;
          display: flex;
          justify-content: center;
          color: var(--color-link);
          transition: var(--transition-link);
          font-weight: 350;
        }
        &:not([data-active]):hover .label {
          color: var(--color-link-hover);
        }
        &[data-active] .label {
          color: var(--color-accent-contrast);
        }
      }
    }
  }

  @scope (.floating-locale-panel) to ([data-component]) {
    position: absolute;
    inset-inline-end: 0;
    padding: 1.5rem;
  }

  @scope (.image-upload) to ([data-component]) {
    .preview {
      position: relative;
      max-width: 20rem;
    }

    .btn {
      justify-self: start;
    }

    .remove {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      width: 1.75rem;
      height: 1.75rem;
      display: grid;
      place-items: center;
      border: none;
      border-radius: 9999px;
      background: rgba(0, 0, 0, 0.55);
      color: #fff;
      font-size: 1.125rem;
      line-height: 1;

      &:hover {
        background: rgba(0, 0, 0, 0.75);
      }
    }

    .progress-bar {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      border-radius: 0 0 0.5rem 0.5rem;
    }

    :scope.phx-drop-target-active .preview {
      outline: 2px dashed var(--color-primary, currentColor);
      outline-offset: 4px;
    }
  }

  @scope (.card-grid) to ([data-component]) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  @scope (.card-component) to ([data-component]) {
    display: grid;
    overflow: hidden;

    color: var(--color-text-body);
    text-decoration: none;

    background: var(--color-neutral-2);
    border: var(--border-size-1) solid var(--color-neutral-3);
    border-radius: var(--radius-3);
    transition: outline-color 100ms var(--ease-quad-out);

    outline: var(--border-size-2) solid transparent;
    outline-offset: 1px;

    &:hover {
     outline-color: var(--color-accent-3);
    }

    .image {
      overflow: hidden;
      aspect-ratio: 16 / 9;
      background: var(--color-neutral-3);
    }

    .image img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .body {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      padding: 1rem;
    }

    .title {
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.3;
    }
  }

  @scope (.profile-popover-component) to ([data-component]) {
    .button {
      width: 3rem;
      height: 3rem;
      border-radius: var(--radius-round);
      text-transform: uppercase;
      background-color: var(--color-accent-4);
      color: var(--color-accent-contrast);
      anchor-name: --profile-popover-button;
      cursor: pointer;
      outline: 4px solid transparent;
      transition: outline-color 160ms var(--ease-quad-out);
      letter-spacing: 0.1;

      &:hover {
        outline-color: var(--color-accent-2);
      }
    }

    .content {
      position-anchor: --profile-popover-button;
      top: anchor(bottom);
      justify-self: anchor-center;
      border-radius: var(--border-size-3);
      overflow: hidden;
      margin-top: 0.5rem;
      margin-right: 0.5rem;
      min-width: 240px;
    }
  }

  @scope (.profile-menu-component) to ([data-component]) {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background-color: var(--color-neutral-3);
    padding: 0.5rem;

    li:not(:has(a)),
    li a {
      display: block;
      width: 100%;
      padding-block: 0.5rem;
      padding-inline: 1rem;
      border-radius: var(--border-size-3);
      color: var(--color-text-body);
      font-weight: 350;
      font-size: 0.875rem;
    }
    li a:has(svg) {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    li a:hover {
      background-color: color-mix(in oklch, var(--color-neutral-3), oklch(96% 0 0) 8%);
    }
  }

  @scope (.breadcrumb-component) to ([data-component]) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }


  @scope (.logo-component) to ([data-component]) {
    width: auto;

    &.size-small {
      height: 2.5rem;
    }
    &.size-medium {
      height: 4rem;
    }
    &.size-large {
      height: 5rem;
    }
  }
}

@layer animations {
  :root, :host {
    --animate-spin: var(--reduced, spin 1s linear infinite);
  }

  @media (prefers-reduced-motion: reduce) {
    :root, :host {
      --reduced: none;
    }
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer utils {
  .util-hidden {
    display: none;
  }
  .util-only-child-block:only-child {
    display: block;
  }
}