@layer theme, base, components, utilities;
@font-face {
  font-family: "Minecraft";
  src: url("./assets/fonts/minecraft-regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Minecraft Ten";
  src: url("./assets/fonts/minecraft-ten.woff2") format("woff2");
  ascent-override: 85%;
  descent-override: 15%;
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  line-gap-override: 0%;
}

:root {
  --ore-font-body: "Minecraft", "Noto Sans", "GNU Unifont", sans-serif;
  --ore-font-display: "Minecraft Ten", "Minecraft", "Noto Sans", sans-serif;
  --ore-font-size-body: 1rem;
  --ore-line-height-body: 1.25;

  --ore-size-pixel: 0.0625rem; /* 1px */
  --ore-size-unit: calc(var(--ore-size-pixel) * 2); /* 2px */
  --ore-motion-fast: 100ms;

  --ore-color-green-10: #a0e081;
  --ore-color-green-20: #86d562;
  --ore-color-green-30: #6cc349;
  --ore-color-green-40: #52a535;
  --ore-color-green-50: #3c8527;
  --ore-color-green-60: #2a641c;
  --ore-color-green-70: #1d4d13;
  --ore-color-green-80: #153a0e;
  --ore-color-green-90: #112f0b;
  --ore-color-green-100: #0f2b0a;

  --ore-color-red-10: #f46d6d;
  --ore-color-red-20: #ea5e5e;
  --ore-color-red-30: #df5050;
  --ore-color-red-40: #d54242;
  --ore-color-red-50: #ca3636;
  --ore-color-red-60: #c02d2d;
  --ore-color-red-70: #b62525;
  --ore-color-red-80: #ad1d1d;
  --ore-color-red-90: #a31616;
  --ore-color-red-100: #990f0f;

  --ore-color-blue-10: #8cb3ff;
  --ore-color-blue-20: #2e6be5;
  --ore-color-blue-30: #1452cc;

  --ore-color-yellow-10: #ffe866;
  --ore-color-yellow-20: #e5c317;
  --ore-color-yellow-30: #8a7500;

  --ore-color-orange-10: #ffb366;
  --ore-color-orange-20: #d3791f;
  --ore-color-orange-30: #a65b11;

  --ore-color-purple-10: #ac90f3;
  --ore-color-purple-20: #9471e0;
  --ore-color-purple-40: #8557f8;
  --ore-color-purple-50: #7345e5;
  --ore-color-purple-60: #5d2cc6;
  --ore-color-purple-70: #4a1cac;
  --ore-color-purple-100: #050029;

  --ore-color-legends-10: #c4f5fe;
  --ore-color-legends-20: #bdf5ff;
  --ore-color-legends-30: #acf2ff;
  --ore-color-legends-40: #70dfff;
  --ore-color-legends-50: #339bd6;

  --ore-color-gold-10: #ffe175;
  --ore-color-gold-20: #ffd953;
  --ore-color-gold-30: #ffc42b;
  --ore-color-gold-40: #db9f21;
  --ore-color-gold-50: #a47b2a;

  --ore-color-white: #ffffff;
  --ore-color-gray-10: #f4f6f9;
  --ore-color-gray-20: #e6e8eb;
  --ore-color-gray-30: #d0d1d4;
  --ore-color-gray-40: #b1b2b5;
  --ore-color-gray-50: #8c8d90;
  --ore-color-gray-60: #58585a;
  --ore-color-gray-70: #48494a;
  --ore-color-gray-80: #313233;
  --ore-color-gray-90: #242425;
  --ore-color-gray-100: #1e1e1f;
  --ore-color-black: #000000;

  --ore-color-black-opacity-10: #0000001a;
  --ore-color-black-opacity-20: #00000033;
  --ore-color-black-opacity-30: #0000004d;
  --ore-color-black-opacity-40: #00000066;
  --ore-color-black-opacity-50: #00000080;
  --ore-color-black-opacity-60: #00000099;
  --ore-color-black-opacity-70: #000000b3;
  --ore-color-black-opacity-80: #000000cc;
  --ore-color-black-opacity-90: #000000e6;

  --ore-color-white-opacity-10: #ffffff1a;
  --ore-color-white-opacity-20: #ffffff33;
  --ore-color-white-opacity-30: #ffffff4d;
  --ore-color-white-opacity-40: #ffffff66;
  --ore-color-white-opacity-50: #ffffff80;
  --ore-color-white-opacity-60: #ffffff99;
  --ore-color-white-opacity-70: #ffffffb3;
  --ore-color-white-opacity-80: #ffffffcc;
  --ore-color-white-opacity-90: #ffffffe6;

  --ore-color-dungeons-10: #ffd953;
  --ore-color-dungeons-20: #ffb64c;
  --ore-color-dungeons-30: #ffa41f;
  --ore-color-dungeons-40: #ff791a;
  --ore-color-dungeons-50: #de7523;

  --ore-color-foreground: var(--ore-color-white);
  --ore-color-border: var(--ore-color-gray-100);
  --ore-color-focus-ring: var(--ore-color-white);
  --ore-color-disabled: var(--ore-color-gray-30);
  --ore-color-disabled-shadow: var(--ore-color-gray-40);
  --ore-color-disabled-foreground: var(--ore-color-gray-70);
  --ore-color-disabled-foreground-dim: var(--ore-color-gray-50);
  --ore-color-disabled-border: var(--ore-color-gray-50);

  --ore-color-primary-background: var(--ore-color-green-50);
  --ore-color-primary-background-hover: var(--ore-color-green-40);
  --ore-color-primary-background-pressed: var(--ore-color-green-60);
  --ore-color-primary-highlight: color-mix(
    in srgb,
    var(--ore-color-primary-background),
    var(--ore-color-white) 20%
  );
  --ore-color-primary-highlight-hover: color-mix(
    in srgb,
    var(--ore-color-primary-background-hover),
    var(--ore-color-white) 20%
  );
  --ore-color-primary-highlight-pressed: color-mix(
    in srgb,
    var(--ore-color-primary-background-pressed),
    var(--ore-color-white) 10%
  );
  --ore-color-primary-shadow: var(--ore-color-green-70);

  --ore-color-secondary-background: var(--ore-color-gray-30);
  --ore-color-secondary-background-hover: var(--ore-color-gray-10);
  --ore-color-secondary-background-pressed: var(--ore-color-gray-40);
  --ore-color-secondary-highlight: color-mix(
    in srgb,
    var(--ore-color-secondary-background),
    var(--ore-color-white) 40%
  );
  --ore-color-secondary-highlight-hover: color-mix(
    in srgb,
    var(--ore-color-secondary-background-hover),
    var(--ore-color-white) 80%
  );
  --ore-color-secondary-highlight-pressed: color-mix(
    in srgb,
    var(--ore-color-secondary-background-pressed),
    var(--ore-color-white) 20%
  );
  --ore-color-secondary-shadow: var(--ore-color-gray-60);

  --ore-color-dungeons-background: var(--ore-color-dungeons-30);
  --ore-color-dungeons-background-hover: var(--ore-color-dungeons-20);
  --ore-color-dungeons-background-pressed: var(--ore-color-dungeons-40);
  --ore-color-dungeons-highlight: var(--ore-color-dungeons-10);
  --ore-color-dungeons-shadow: var(--ore-color-dungeons-50);

  --ore-color-legends-background: var(--ore-color-legends-30);
  --ore-color-legends-background-hover: var(--ore-color-legends-20);
  --ore-color-legends-background-pressed: var(--ore-color-legends-40);
  --ore-color-legends-highlight: var(--ore-color-legends-10);
  --ore-color-legends-shadow: var(--ore-color-legends-50);

  --ore-color-gold-background: var(--ore-color-gold-30);
  --ore-color-gold-background-hover: var(--ore-color-gold-10);
  --ore-color-gold-background-pressed: var(--ore-color-gold-40);
  --ore-color-gold-highlight: var(--ore-color-gold-20);
  --ore-color-gold-shadow: var(--ore-color-gold-50);

  --ore-color-realms-background: var(--ore-color-purple-50);
  --ore-color-realms-background-hover: var(--ore-color-purple-40);
  --ore-color-realms-background-pressed: var(--ore-color-purple-60);
  --ore-color-realms-highlight: var(--ore-color-purple-40);
  --ore-color-realms-shadow: var(--ore-color-purple-70);

  --ore-color-neutral-background: var(--ore-color-gray-70);
  --ore-color-neutral-background-hover: var(--ore-color-gray-60);
  --ore-color-neutral-background-pressed: var(--ore-color-gray-80);
  --ore-color-neutral-highlight: color-mix(
    in srgb,
    var(--ore-color-neutral-background),
    var(--ore-color-white) 20%
  );
  --ore-color-neutral-highlight-hover: color-mix(
    in srgb,
    var(--ore-color-neutral-background-hover),
    var(--ore-color-white) 20%
  );
  --ore-color-neutral-highlight-pressed: color-mix(
    in srgb,
    var(--ore-color-neutral-background-pressed),
    var(--ore-color-white) 20%
  );
  --ore-color-neutral-shadow: var(--ore-color-gray-80);
  --ore-color-neutral-text: var(--ore-color-white);
  --ore-color-neutral-text-dim: var(--ore-color-gray-30);
  --ore-color-neutral-text-dimmer: var(--ore-color-gray-40);
  --ore-color-neutral-border: var(--ore-color-gray-100);
  --ore-color-neutral-surface: var(--ore-color-gray-70);
  --ore-color-neutral-surface-raised: var(--ore-color-gray-80);
  --ore-color-neutral-surface-sunken: var(--ore-color-gray-90);
  --ore-color-neutral-surface-deep: var(--ore-color-gray-100);
  --ore-color-neutral-specular: color-mix(
    in srgb,
    var(--ore-color-neutral-surface),
    var(--ore-color-white) 20%
  );
  --ore-color-neutral-bevel-shadow: color-mix(
    in srgb,
    var(--ore-color-neutral-surface),
    var(--ore-color-black) 30%
  );
  --ore-color-neutral-corner: #49494b;
  --ore-color-neutral-divider: color-mix(
    in srgb,
    var(--ore-color-neutral-surface),
    var(--ore-color-black) 5%
  );

  --ore-color-neutral-50-background: var(--ore-color-gray-50);
  --ore-color-neutral-50-background-hover: var(--ore-color-gray-40);
  --ore-color-neutral-50-background-pressed: var(--ore-color-gray-60);
  --ore-color-neutral-50-highlight: color-mix(
    in srgb,
    var(--ore-color-neutral-50-background),
    var(--ore-color-white) 10%
  );
  --ore-color-neutral-50-highlight-hover: color-mix(
    in srgb,
    var(--ore-color-neutral-50-background-hover),
    var(--ore-color-white) 10%
  );
  --ore-color-neutral-50-highlight-pressed: color-mix(
    in srgb,
    var(--ore-color-neutral-50-background-pressed),
    var(--ore-color-white) 10%
  );
  --ore-color-neutral-50-highlight-focus: color-mix(
    in srgb,
    var(--ore-color-neutral-50-background),
    var(--ore-color-white) 20%
  );

  --ore-color-destructive-background: var(--ore-color-red-50);
  --ore-color-destructive-background-hover: var(--ore-color-red-30);
  --ore-color-destructive-background-pressed: var(--ore-color-red-60);
  --ore-color-destructive-highlight: color-mix(
    in srgb,
    var(--ore-color-destructive-background),
    var(--ore-color-white) 10%
  );
  --ore-color-destructive-highlight-hover: color-mix(
    in srgb,
    var(--ore-color-destructive-background-hover),
    var(--ore-color-white) 10%
  );
  --ore-color-destructive-highlight-pressed: color-mix(
    in srgb,
    var(--ore-color-destructive-background-pressed),
    var(--ore-color-white) 10%
  );
  --ore-color-destructive-shadow: var(--ore-color-red-80);

  --ore-color-primary-tint-background: var(--ore-color-green-30);
  --ore-color-primary-tint-foreground: var(--ore-color-gray-100);
  --ore-color-success-background: var(--ore-color-green-50);
  --ore-color-success-foreground: var(--ore-color-white);
  --ore-color-success-tint-background: var(--ore-color-green-10);
  --ore-color-success-tint-foreground: var(--ore-color-gray-100);
  --ore-color-informative-background: var(--ore-color-blue-20);
  --ore-color-informative-foreground: var(--ore-color-white);
  --ore-color-informative-tint-background: var(--ore-color-blue-10);
  --ore-color-informative-tint-foreground: var(--ore-color-gray-100);
  --ore-color-notice-background: var(--ore-color-orange-20);
  --ore-color-notice-tint-background: var(--ore-color-yellow-10);
  --ore-color-notice-tint-foreground: var(--ore-color-gray-100);
  --ore-color-destructive-tint-background: var(--ore-color-red-10);
  --ore-color-destructive-tint-foreground: var(--ore-color-gray-100);
  --ore-color-realms-tint-background: var(--ore-color-purple-10);
  --ore-color-realms-informative-background: var(--ore-color-purple-100);
  --ore-color-realms-informative-tint-background: var(--ore-color-purple-10);

  --ore-color-overlay: color-mix(
    in srgb,
    var(--ore-color-black) 65%,
    transparent
  );
  --ore-color-text-shadow: var(--ore-color-black-opacity-30);

  --ore-color-nav-background: #e7e8ec;
  --ore-color-nav-shadow: #b1b2b6;
  --ore-color-nav-drop-shadow: color-mix(
    in srgb,
    var(--ore-color-gray-100) 65%,
    transparent
  );
  --ore-color-nav-action-highlight: var(--ore-color-white);
  --ore-color-nav-action-shadow: #a1a2a4;
}

@layer components {
:where(
  details.ore-accordion,
  ore-button,
  article.ore-card,
  .ore-container,
  .ore-table,
  .ore-dropdown,
  button.ore-icon-button,
  ore-modal,
  nav.ore-navbar,
  progress.ore-progress-bar,
  .ore-progress-ring,
  ore-radio,
  ore-radio-group,
  .ore-scrollbar,
  .ore-spinner,
  ore-switch,
  button.ore-tab-button,
  ore-tag,
  .ore-toggles,
  .ore-tooltip,
  .ore-toast
) {
  box-sizing: border-box;
  font: inherit;
}

:where(ore-icon) {
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  width: 1em;
  height: 1em;
  color: inherit;
  line-height: 1;
  vertical-align: -0.125em;
}

:where(ore-icon > svg) {
  display: block;
  width: 100%;
  height: 100%;
}

/* Improvements for touch devices */
:where(
  ore-button,
  button.ore-icon-button,
  ore-radio,
  ore-switch,
  button.ore-tab-button,
  .ore-dropdown .ore-dropdown-item,
  ore-modal .ore-modal-header-button,
  nav.ore-navbar .ore-navbar-button,
  nav.ore-navbar .ore-navbar-action
) {
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

:where(input[type="range"]) {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

:where(
  .ore-textfield,
  .ore-textfield .ore-textfield-input,
  .ore-textarea,
  .ore-textarea .ore-textarea-input
) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:where(input[type="range"]:not([data-orientation="vertical"])) {
  touch-action: pan-y;
}

:where(input[type="range"][data-orientation="vertical"]) {
  touch-action: pan-x;
}

:where(details.ore-accordion) {
  --ore-accordion-unit: var(--ore-size-unit);
  --ore-accordion-border: var(--ore-color-neutral-border);
  --ore-accordion-background: var(--ore-color-neutral-surface);
  --ore-accordion-foreground: var(--ore-color-foreground);
  --ore-accordion-content-foreground: var(--ore-color-neutral-text-dim);
  --ore-accordion-trigger-background: var(--ore-color-neutral-surface);
  --ore-accordion-trigger-highlight: var(--ore-color-neutral-specular);
  --ore-accordion-trigger-shadow: var(--ore-color-neutral-bevel-shadow);
  --ore-accordion-trigger-corner: var(--ore-color-neutral-corner);
  --ore-accordion-trigger-background-hover: var(
    --ore-color-neutral-background-hover
  );
  --ore-accordion-trigger-highlight-hover: var(
    --ore-color-neutral-highlight-hover
  );
  --ore-accordion-trigger-corner-hover: var(--ore-color-neutral-highlight);
  --ore-accordion-trigger-background-pressed: var(
    --ore-color-neutral-background-pressed
  );
  --ore-accordion-trigger-highlight-pressed: var(--ore-color-neutral-shadow);
  --ore-accordion-trigger-shadow-pressed: var(
    --ore-color-neutral-highlight-pressed
  );
  --ore-accordion-trigger-corner-pressed: var(--ore-color-neutral-background);

  display: block;
  width: min(100%, calc(var(--ore-accordion-unit) * 200));
  color: var(--ore-accordion-foreground);
  font-family: var(--ore-font-body);
}

:where(details.ore-accordion > summary) {
  display: grid;
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--ore-accordion-unit) * 4);
  box-sizing: border-box;
  min-height: calc(var(--ore-accordion-unit) * 20);
  margin-inline: var(--ore-accordion-unit);
  padding: var(--ore-accordion-unit) calc(var(--ore-accordion-unit) * 8);
  color: var(--ore-accordion-foreground);
  background:
    linear-gradient(
        var(--ore-accordion-trigger-corner),
        var(--ore-accordion-trigger-corner)
      )
      right top / var(--ore-accordion-unit) var(--ore-accordion-unit) no-repeat,
    linear-gradient(
        var(--ore-accordion-trigger-corner),
        var(--ore-accordion-trigger-corner)
      )
      left bottom / var(--ore-accordion-unit) var(--ore-accordion-unit)
      no-repeat,
    linear-gradient(
        var(--ore-accordion-trigger-highlight),
        var(--ore-accordion-trigger-highlight)
      )
      left top / calc(100% - var(--ore-accordion-unit))
      var(--ore-accordion-unit) no-repeat,
    linear-gradient(
        var(--ore-accordion-trigger-highlight),
        var(--ore-accordion-trigger-highlight)
      )
      left top / var(--ore-accordion-unit)
      calc(100% - var(--ore-accordion-unit)) no-repeat,
    linear-gradient(
        var(--ore-accordion-trigger-shadow),
        var(--ore-accordion-trigger-shadow)
      )
      right bottom / calc(100% - var(--ore-accordion-unit))
      var(--ore-accordion-unit) no-repeat,
    linear-gradient(
        var(--ore-accordion-trigger-shadow),
        var(--ore-accordion-trigger-shadow)
      )
      right bottom / var(--ore-accordion-unit)
      calc(100% - var(--ore-accordion-unit)) no-repeat,
    var(--ore-accordion-trigger-background);
  box-shadow: 0 0 0 var(--ore-accordion-unit) var(--ore-accordion-border);
  text-align: left;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

:where(details.ore-accordion > summary::-webkit-details-marker) {
  display: none;
}

:where(details.ore-accordion > summary > .ore-accordion-title) {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: calc(var(--ore-accordion-unit) * 7);
  line-height: calc(var(--ore-accordion-unit) * 8);
}

:where(details.ore-accordion > summary)::after {
  width: calc(var(--ore-accordion-unit) * 6);
  height: calc(var(--ore-accordion-unit) * 6);
  background: currentColor;
  mask: url("./icons/chevron-down.svg") center / contain no-repeat;
  content: "";
}

:where(details.ore-accordion[open] > summary)::after {
  mask-image: url("./icons/chevron-up.svg");
}

:where(details.ore-accordion > summary:active) {
  --ore-accordion-trigger-background: var(
    --ore-accordion-trigger-background-pressed
  );
  --ore-accordion-trigger-highlight: var(
    --ore-accordion-trigger-highlight-pressed
  );
  --ore-accordion-trigger-shadow: var(--ore-accordion-trigger-shadow-pressed);
  --ore-accordion-trigger-corner: var(--ore-accordion-trigger-corner-pressed);
}

@media (hover: hover) and (pointer: fine) {
  :where(details.ore-accordion > summary:hover:not(:active)) {
    --ore-accordion-trigger-background: var(
      --ore-accordion-trigger-background-hover
    );
    --ore-accordion-trigger-highlight: var(
      --ore-accordion-trigger-highlight-hover
    );
    --ore-accordion-trigger-corner: var(--ore-accordion-trigger-corner-hover);
  }
}

:where(details.ore-accordion > .ore-accordion-content) {
  box-sizing: border-box;
  padding: calc(var(--ore-accordion-unit) * 4)
    calc(var(--ore-accordion-unit) * 8);
  border: var(--ore-accordion-unit) solid var(--ore-accordion-border);
  border-top: 0;
  color: var(--ore-accordion-content-foreground);
  background: var(--ore-accordion-background);
  font-size: calc(var(--ore-accordion-unit) * 6);
  line-height: calc(var(--ore-accordion-unit) * 7);
}

:where(details.ore-accordion > summary:focus-visible) {
  outline: var(--ore-accordion-unit) solid var(--ore-color-focus-ring);
  outline-offset: var(--ore-accordion-unit);
}

:where(.ore-button, .ore-tab-button) {
  --ore-button-unit: var(--ore-size-unit);
  --ore-button-background-default: var(--ore-color-primary-background);
  --ore-button-background-hover: var(--ore-color-primary-background-hover);
  --ore-button-background-pressed: var(--ore-color-primary-background-pressed);
  --ore-button-highlight-default: var(--ore-color-primary-highlight);
  --ore-button-highlight-hover: var(--ore-color-primary-highlight-hover);
  --ore-button-highlight-pressed: var(--ore-color-primary-highlight-pressed);
  --ore-button-background: var(--ore-button-background-default);
  --ore-button-highlight: var(--ore-button-highlight-default);
  --ore-button-border: var(--ore-color-border);
  --ore-button-shadow: var(--ore-color-primary-shadow);
  --ore-button-foreground: var(--ore-color-foreground);
  --ore-button-font-family: var(--ore-font-body);
  --ore-button-font-size: calc(var(--ore-button-unit) * 7);
  --ore-button-text-shadow: none;
  --ore-button-face-offset: 0px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  min-width: calc(var(--ore-button-unit) * 64);
  min-height: calc(var(--ore-button-unit) * 22);
  padding: 0 calc(var(--ore-button-unit) * 8) calc(var(--ore-button-unit) * 2);
  color: var(--ore-button-foreground);
  background:
    linear-gradient(var(--ore-button-border), var(--ore-button-border)) center
      var(--ore-button-face-offset) / 100% var(--ore-button-unit) no-repeat,
    linear-gradient(var(--ore-button-border), var(--ore-button-border)) center
      bottom / 100% var(--ore-button-unit) no-repeat,
    linear-gradient(var(--ore-button-border), var(--ore-button-border)) left
      var(--ore-button-face-offset) / var(--ore-button-unit)
      calc(100% - var(--ore-button-face-offset)) no-repeat,
    linear-gradient(var(--ore-button-border), var(--ore-button-border)) right
      var(--ore-button-face-offset) / var(--ore-button-unit)
      calc(100% - var(--ore-button-face-offset)) no-repeat,
    linear-gradient(var(--ore-button-shadow), var(--ore-button-shadow)) center
      calc(100% - var(--ore-button-unit)) /
      calc(100% - var(--ore-button-unit) * 2) calc(var(--ore-button-unit) * 2)
      no-repeat,
    linear-gradient(var(--ore-button-highlight), var(--ore-button-highlight))
      center calc(var(--ore-button-unit) + var(--ore-button-face-offset)) /
      calc(100% - var(--ore-button-unit) * 2) var(--ore-button-unit) no-repeat,
    linear-gradient(var(--ore-button-highlight), var(--ore-button-highlight))
      center
      calc(100% - var(--ore-button-unit) * 3 + var(--ore-button-face-offset)) /
      calc(100% - var(--ore-button-unit) * 2) var(--ore-button-unit) no-repeat,
    linear-gradient(var(--ore-button-highlight), var(--ore-button-highlight))
      left calc(var(--ore-button-unit) + var(--ore-button-face-offset)) /
      calc(var(--ore-button-unit) * 2)
      calc(100% - var(--ore-button-unit) * 4 - 1px) no-repeat,
    linear-gradient(var(--ore-button-highlight), var(--ore-button-highlight))
      right calc(var(--ore-button-unit) + var(--ore-button-face-offset)) /
      calc(var(--ore-button-unit) * 2)
      calc(100% - var(--ore-button-unit) * 4 - 1px) no-repeat,
    linear-gradient(var(--ore-button-background), var(--ore-button-background))
      center var(--ore-button-face-offset) / 100%
      calc(100% - var(--ore-button-face-offset)) no-repeat;
  font-family: var(--ore-button-font-family);
  font-size: var(--ore-button-font-size);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-shadow: var(--ore-button-text-shadow);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

:where(.ore-button, .ore-tab-button)::before {
  position: absolute;
  top: var(--ore-button-face-offset);
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 0 0 0 var(--ore-button-unit) var(--ore-button-border);
  content: "";
  pointer-events: none;
}

:where(.ore-button) {
  position: relative;
}

:where(.ore-button > .ore-button-link) {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: inherit;
  text-decoration: none;
}

:where(.ore-button > .ore-button-prefix) {
  margin-inline-end: calc(var(--ore-button-unit) * 4);
}

:where(.ore-button > .ore-button-suffix) {
  margin-inline-start: calc(var(--ore-button-unit) * 4);
}

:where(.ore-button > .ore-button-spinner) {
  position: absolute;
  z-index: 2;
  width: calc(var(--ore-button-unit) * 8);
  height: calc(var(--ore-button-unit) * 8);
  color: var(--ore-button-foreground);
}

:where(.ore-button[data-loading]) {
  color: transparent;
  text-shadow: none;
  cursor: wait;
}

:where(.ore-button[data-loading])::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--ore-button-unit) * 8);
  height: calc(var(--ore-button-unit) * 8);
  background-color: var(--ore-button-foreground);
  content: "";
  mask-image: url("./icons/spinner.svg");
  mask-position: 0% 50%;
  mask-repeat: no-repeat;
  mask-size: 3475% 100%;
  animation: ore-button-spinner 800ms steps(15, jump-end) infinite;
  transform: translate(-50%, -50%);
  -webkit-mask-image: url("./icons/spinner.svg");
  -webkit-mask-position: 0% 50%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 3475% 100%;
}

@keyframes ore-button-spinner {
  to {
    mask-position: 100% 50%;
    -webkit-mask-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.ore-button[data-loading])::after {
    animation: none;
  }
}

:where(
  .ore-button[data-loading] > :not(.ore-button-spinner, .ore-button-link)
) {
  visibility: hidden;
}

:where(.ore-button[data-loading] > .ore-button-spinner) {
  color: var(--ore-button-foreground);
}

:where(.ore-button[data-variant="hero"]) {
  --ore-button-font-family: var(--ore-font-display);
  --ore-button-font-size: calc(var(--ore-button-unit) * 9);
  --ore-button-text-shadow: var(--ore-button-unit) var(--ore-button-unit)
    var(--ore-color-text-shadow);
}

:where(.ore-button[data-color="secondary"]) {
  --ore-button-background-default: var(--ore-color-secondary-background);
  --ore-button-background-hover: var(--ore-color-secondary-background-hover);
  --ore-button-background-pressed: var(
    --ore-color-secondary-background-pressed
  );
  --ore-button-highlight-default: var(--ore-color-secondary-highlight);
  --ore-button-highlight-hover: var(--ore-color-secondary-highlight-hover);
  --ore-button-highlight-pressed: var(--ore-color-secondary-highlight-pressed);
  --ore-button-shadow: var(--ore-color-secondary-shadow);
  --ore-button-foreground: var(--ore-color-border);
}

:where(.ore-button[data-color="destructive"]) {
  --ore-button-background-default: var(--ore-color-destructive-background);
  --ore-button-background-hover: var(--ore-color-destructive-background-hover);
  --ore-button-background-pressed: var(
    --ore-color-destructive-background-pressed
  );
  --ore-button-highlight-default: var(--ore-color-destructive-highlight);
  --ore-button-highlight-hover: var(--ore-color-destructive-highlight-hover);
  --ore-button-highlight-pressed: var(
    --ore-color-destructive-highlight-pressed
  );
  --ore-button-shadow: var(--ore-color-destructive-shadow);
}

:where(
  .ore-button[data-color="dungeons"],
  .ore-button[data-color="legends"],
  .ore-button[data-color="gold"],
  .ore-button[data-color="realms"]
) {
  --ore-button-background-default: var(--ore-color-dungeons-background);
  --ore-button-background-hover: var(--ore-color-dungeons-background-hover);
  --ore-button-background-pressed: var(--ore-color-dungeons-background-pressed);
  --ore-button-highlight-default: var(--ore-color-dungeons-highlight);
  --ore-button-highlight-hover: var(--ore-color-dungeons-highlight);
  --ore-button-highlight-pressed: var(--ore-color-dungeons-highlight);
  --ore-button-shadow: var(--ore-color-dungeons-shadow);
  --ore-button-foreground: var(--ore-color-gray-100);
}

:where(.ore-button[data-color="legends"]) {
  --ore-button-background-default: var(--ore-color-legends-background);
  --ore-button-background-hover: var(--ore-color-legends-background-hover);
  --ore-button-background-pressed: var(--ore-color-legends-background-pressed);
  --ore-button-highlight-default: var(--ore-color-legends-highlight);
  --ore-button-highlight-hover: var(--ore-color-legends-highlight);
  --ore-button-highlight-pressed: var(--ore-color-legends-highlight);
  --ore-button-shadow: var(--ore-color-legends-shadow);
  --ore-button-foreground: var(--ore-color-gray-100);
}

:where(.ore-button[data-color="gold"]) {
  --ore-button-background-default: var(--ore-color-gold-background);
  --ore-button-background-hover: var(--ore-color-gold-background-hover);
  --ore-button-background-pressed: var(--ore-color-gold-background-pressed);
  --ore-button-highlight-default: var(--ore-color-gold-highlight);
  --ore-button-highlight-hover: var(--ore-color-gold-highlight);
  --ore-button-highlight-pressed: var(--ore-color-gold-highlight);
  --ore-button-shadow: var(--ore-color-gold-shadow);
  --ore-button-foreground: var(--ore-color-gray-100);
}

:where(.ore-button[data-color="realms"]) {
  --ore-button-background-default: var(--ore-color-realms-background);
  --ore-button-background-hover: var(--ore-color-realms-background-hover);
  --ore-button-background-pressed: var(--ore-color-realms-background-pressed);
  --ore-button-highlight-default: var(--ore-color-realms-highlight);
  --ore-button-highlight-hover: var(--ore-color-realms-highlight);
  --ore-button-highlight-pressed: var(--ore-color-realms-highlight);
  --ore-button-shadow: var(--ore-color-realms-shadow);
  --ore-button-foreground: var(--ore-color-white);
}

@media (hover: hover) and (pointer: fine) {
  :where(.ore-button, .ore-tab-button):hover:not(
      [disabled],
      [form-disabled],
      [loading]
    ) {
    --ore-button-background: var(--ore-button-background-hover);
    --ore-button-highlight: var(--ore-button-highlight-hover);
  }
}

:where(.ore-button).preview-hover:not([disabled], [data-loading]) {
  --ore-button-background: var(--ore-button-background-hover);
  --ore-button-highlight: var(--ore-button-highlight-hover);
}

:where(
  :is(.ore-button, .ore-tab-button):active:not(
      [disabled],
      [form-disabled],
      [loading]
    ),
  :is(.ore-button, .ore-tab-button)[data-pressed]:not(
      [disabled],
      [form-disabled],
      [data-loading]
    ),
  :is(.ore-button, .ore-tab-button)[data-pressed]:not(
      [disabled],
      [form-disabled],
      [loading]
    )
) {
  --ore-button-background: var(--ore-button-background-pressed);
  --ore-button-highlight: var(--ore-button-highlight-pressed);
  --ore-button-shadow: transparent;
  --ore-button-face-offset: calc(var(--ore-button-unit) * 2);

  padding-top: var(--ore-button-face-offset);
  padding-bottom: 0;
}

:where(.ore-button).preview-pressed:not([disabled], [data-loading]) {
  --ore-button-background: var(--ore-button-background-pressed);
  --ore-button-highlight: var(--ore-button-highlight-pressed);
  --ore-button-shadow: transparent;
  --ore-button-face-offset: calc(var(--ore-button-unit) * 2);

  padding-top: var(--ore-button-face-offset);
  padding-bottom: 0;
}

:where(.ore-button, .ore-tab-button):focus-visible,
:where(.ore-button > .ore-button-link):focus-visible {
  outline: none;
}

:where(.ore-button, .ore-tab-button):focus-visible::before,
:where(.ore-button:has(> .ore-button-link:focus-visible))::before {
  box-shadow:
    0 0 0 var(--ore-button-unit) var(--ore-color-focus-ring),
    inset 0 0 0 var(--ore-button-unit) var(--ore-button-border);
}

:where(.ore-button).preview-focus::before {
  box-shadow:
    0 0 0 var(--ore-button-unit) var(--ore-color-focus-ring),
    inset 0 0 0 var(--ore-button-unit) var(--ore-button-border);
}

:where(
  .ore-button:disabled,
  .ore-button[data-disabled],
  .ore-tab-button[disabled]
) {
  --ore-button-background: var(--ore-color-disabled);
  --ore-button-highlight: var(--ore-color-disabled);
  --ore-button-border: var(--ore-color-disabled-border);
  --ore-button-shadow: var(--ore-color-secondary-background-pressed);

  color: var(--ore-color-disabled-foreground);
  --ore-button-text-shadow: none;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  :where(.ore-button[data-loading])::after {
    animation: none;
  }
}

:where(article.ore-card) {
  --ore-card-unit: var(--ore-size-unit);
  --ore-card-border: var(--ore-color-border);
  --ore-card-background: var(--ore-color-neutral-surface);
  --ore-card-highlight: var(--ore-color-neutral-specular);
  --ore-card-shadow: var(--ore-color-neutral-bevel-shadow);
  --ore-card-foreground: var(--ore-color-foreground);
  --ore-card-description: var(--ore-color-disabled);

  position: relative;
  isolation: isolate;
  display: grid;
  box-sizing: border-box;
  width: min(100%, calc(var(--ore-card-unit) * 148));
  row-gap: var(--ore-card-unit);
  color: var(--ore-card-foreground);
  background: var(--ore-card-shadow);
  box-shadow: 0 0 0 var(--ore-card-unit) var(--ore-card-border);
  font-family: var(--ore-font-body);
}

:where(article.ore-card > .ore-card-media) {
  position: relative;
  z-index: 2;
  aspect-ratio: 16 / 9;
  min-width: 0;
  background: var(--ore-color-black);
}

:where(article.ore-card > .ore-card-media)::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  box-shadow: 0 0 0 var(--ore-card-unit) var(--ore-card-border);
  content: "";
  pointer-events: none;
}

:where(article.ore-card > .ore-card-media > img) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:where(
  article.ore-card .ore-card-overlay-top-start,
  article.ore-card .ore-card-overlay-bottom-start,
  article.ore-card .ore-card-overlay-top-end
) {
  position: absolute;
  z-index: 3;
}

:where(article.ore-card .ore-card-overlay-top-start) {
  top: 0;
  left: 0;
}

:where(article.ore-card .ore-card-overlay-bottom-start) {
  bottom: 0;
  left: 0;
}

:where(article.ore-card .ore-card-overlay-top-end) {
  top: 0;
  right: 0;
}

:where(article.ore-card > .ore-card-body) {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  min-width: 0;
  min-height: calc(var(--ore-card-unit) * 29.25);
  border-top: var(--ore-card-unit) solid var(--ore-card-highlight);
  border-right: var(--ore-card-unit) solid var(--ore-card-shadow);
  border-bottom: var(--ore-card-unit) solid var(--ore-card-shadow);
  border-left: var(--ore-card-unit) solid var(--ore-card-highlight);
  background: var(--ore-card-background);
}

:where(article.ore-card .ore-card-caption) {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 0 calc(var(--ore-card-unit) * 6.35);
}

:where(article.ore-card .ore-card-title) {
  overflow: hidden;
  font-size: calc(var(--ore-card-unit) * 8);
  line-height: calc(var(--ore-card-unit) * 10);
  text-overflow: ellipsis;
  white-space: nowrap;
}

:where(article.ore-card .ore-card-description) {
  overflow: hidden;
  color: var(--ore-card-description);
  font-size: calc(var(--ore-card-unit) * 6);
  line-height: calc(var(--ore-card-unit) * 7);
  text-overflow: ellipsis;
  white-space: nowrap;
}

:where(article.ore-card .ore-card-meta) {
  align-self: center;
  margin-inline-start: auto;
  padding-inline-end: calc(var(--ore-card-unit) * 3.35);
  font-size: calc(var(--ore-card-unit) * 6);
  line-height: calc(var(--ore-card-unit) * 7);
  white-space: nowrap;
}

:where(article.ore-card .ore-card-action) {
  --ore-icon-button-width: calc(var(--ore-card-unit) * 29.25);
  --ore-icon-button-height: calc(100% + var(--ore-card-unit) * 2);
  --ore-icon-button-box-shadow: calc(var(--ore-card-unit) * -1) 0 0
    var(--ore-icon-button-border);

  align-self: stretch;
  flex: 0 0 calc(var(--ore-card-unit) * 29.25);
  margin-inline-start: auto;
  margin-inline-end: calc(var(--ore-card-unit) * -1);
  margin-block-start: calc(var(--ore-card-unit) * -1);
  margin-block-end: calc(var(--ore-card-unit) * -1);
}

:where(article.ore-card .ore-card-action > ore-icon) {
  width: calc(var(--ore-card-unit) * 10);
  height: calc(var(--ore-card-unit) * 10);
}

:where(article.ore-card .ore-card-overlay-top-end) {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: calc(var(--ore-card-unit) * 18);
  height: calc(var(--ore-card-unit) * 18);
  color: var(--ore-card-foreground);
  background: var(--ore-color-neutral-surface-raised);
  box-shadow: 0 0 0 var(--ore-card-unit) var(--ore-card-border);
}

:where(article.ore-card .ore-card-overlay-top-end > ore-icon) {
  width: calc(var(--ore-card-unit) * 8);
  height: calc(var(--ore-card-unit) * 8);
}

:where(input.ore-checkbox:not([role="switch"])) {
  --ore-checkbox-unit: var(--ore-size-unit);
  --ore-checkbox-background: var(--ore-color-neutral-50-background);
  --ore-checkbox-highlight: var(--ore-color-neutral-50-highlight);
  --ore-checkbox-border: var(--ore-color-border);
  --ore-checkbox-indicator: var(--ore-color-foreground);
  --ore-checkbox-active-background: var(--ore-color-primary-background);
  --ore-checkbox-active-background-hover: var(
    --ore-color-primary-background-hover
  );
  --ore-checkbox-active-background-pressed: var(
    --ore-color-primary-background-pressed
  );
  --ore-checkbox-active-highlight: var(--ore-color-primary-highlight);
  --ore-checkbox-active-highlight-hover: var(
    --ore-color-primary-highlight-hover
  );
  --ore-checkbox-active-highlight-pressed: var(
    --ore-color-primary-highlight-pressed
  );

  display: inline-grid;
  flex: none;
  place-content: center;
  appearance: none;
  box-sizing: border-box;
  width: calc(var(--ore-checkbox-unit) * 12);
  height: calc(var(--ore-checkbox-unit) * 12);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--ore-checkbox-background);
  box-shadow:
    inset 0 0 0 var(--ore-checkbox-unit) var(--ore-checkbox-border),
    inset 0 0 0 calc(var(--ore-checkbox-unit) * 2) var(--ore-checkbox-highlight);
  color: var(--ore-checkbox-indicator);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:where(input.ore-checkbox:not([role="switch"]))::before {
  width: calc(var(--ore-checkbox-unit) * 8);
  height: calc(var(--ore-checkbox-unit) * 8);
  background: currentColor;
  content: "";
  mask: url("./icons/tick.svg") center / contain no-repeat;
  opacity: 0;
}

:where(input.ore-checkbox:not([role="switch"]):checked) {
  --ore-checkbox-background: var(--ore-checkbox-active-background);
  --ore-checkbox-highlight: var(--ore-checkbox-active-highlight);
}

:where(input.ore-checkbox:not([role="switch"]):checked)::before {
  opacity: 1;
}

:where(label:has(> input.ore-checkbox:not([role="switch"]))) {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ore-size-unit) * 4);
  min-height: calc(var(--ore-size-unit) * 12);
  color: var(--ore-color-border);
  cursor: pointer;
  user-select: none;
}

:where(
  input.ore-checkbox:not([role="switch"])[data-color="secondary"],
  input.ore-checkbox:not([role="switch"])[data-color="dungeons"],
  input.ore-checkbox:not([role="switch"])[data-color="legends"],
  input.ore-checkbox:not([role="switch"])[data-color="gold"]
) {
  --ore-checkbox-indicator: var(--ore-color-gray-100);
}

@media (hover: hover) and (pointer: fine) {
  :where(input.ore-checkbox:not([role="switch"]):hover:not(:disabled)) {
    --ore-checkbox-background: var(--ore-color-neutral-50-background-hover);
    --ore-checkbox-highlight: var(--ore-color-neutral-50-highlight-hover);
  }

  :where(input.ore-checkbox:not([role="switch"]):checked:hover:not(:disabled)) {
    --ore-checkbox-background: var(--ore-checkbox-active-background-hover);
    --ore-checkbox-highlight: var(--ore-checkbox-active-highlight-hover);
  }
}

:where(input.ore-checkbox:not([role="switch"]):active:not(:disabled)) {
  --ore-checkbox-background: var(--ore-color-neutral-50-background-pressed);
  --ore-checkbox-highlight: var(--ore-color-neutral-50-highlight-pressed);
}

:where(input.ore-checkbox:not([role="switch"]):checked:active:not(:disabled)) {
  --ore-checkbox-background: var(--ore-checkbox-active-background-pressed);
  --ore-checkbox-highlight: var(--ore-checkbox-active-highlight-pressed);
}

:where(input.ore-checkbox:not([role="switch"])[data-color="secondary"]) {
  --ore-checkbox-active-background: var(--ore-color-secondary-background);
  --ore-checkbox-active-background-hover: var(
    --ore-color-secondary-background-hover
  );
  --ore-checkbox-active-background-pressed: var(
    --ore-color-secondary-background-pressed
  );
  --ore-checkbox-active-highlight: var(--ore-color-secondary-highlight);
  --ore-checkbox-active-highlight-hover: var(
    --ore-color-secondary-highlight-hover
  );
  --ore-checkbox-active-highlight-pressed: var(
    --ore-color-secondary-highlight-pressed
  );
}

:where(input.ore-checkbox:not([role="switch"])[data-color="destructive"]) {
  --ore-checkbox-active-background: var(--ore-color-destructive-background);
  --ore-checkbox-active-background-hover: var(
    --ore-color-destructive-background-hover
  );
  --ore-checkbox-active-background-pressed: var(
    --ore-color-destructive-background-pressed
  );
  --ore-checkbox-active-highlight: var(--ore-color-destructive-highlight);
  --ore-checkbox-active-highlight-hover: var(
    --ore-color-destructive-highlight-hover
  );
  --ore-checkbox-active-highlight-pressed: var(
    --ore-color-destructive-highlight-pressed
  );
}

:where(input.ore-checkbox:not([role="switch"])[data-color="dungeons"]) {
  --ore-checkbox-active-background: var(--ore-color-dungeons-background);
  --ore-checkbox-active-background-hover: var(
    --ore-color-dungeons-background-hover
  );
  --ore-checkbox-active-background-pressed: var(
    --ore-color-dungeons-background-pressed
  );
  --ore-checkbox-active-highlight: var(--ore-color-dungeons-highlight);
  --ore-checkbox-active-highlight-hover: var(--ore-color-dungeons-highlight);
  --ore-checkbox-active-highlight-pressed: var(--ore-color-dungeons-highlight);
}

:where(input.ore-checkbox:not([role="switch"])[data-color="legends"]) {
  --ore-checkbox-active-background: var(--ore-color-legends-background);
  --ore-checkbox-active-background-hover: var(
    --ore-color-legends-background-hover
  );
  --ore-checkbox-active-background-pressed: var(
    --ore-color-legends-background-pressed
  );
  --ore-checkbox-active-highlight: var(--ore-color-legends-highlight);
  --ore-checkbox-active-highlight-hover: var(--ore-color-legends-highlight);
  --ore-checkbox-active-highlight-pressed: var(--ore-color-legends-highlight);
}

:where(input.ore-checkbox:not([role="switch"])[data-color="realms"]) {
  --ore-checkbox-active-background: var(--ore-color-realms-background);
  --ore-checkbox-active-background-hover: var(
    --ore-color-realms-background-hover
  );
  --ore-checkbox-active-background-pressed: var(
    --ore-color-realms-background-pressed
  );
  --ore-checkbox-active-highlight: var(--ore-color-realms-highlight);
  --ore-checkbox-active-highlight-hover: var(--ore-color-realms-highlight);
  --ore-checkbox-active-highlight-pressed: var(--ore-color-realms-highlight);
}

:where(input.ore-checkbox:not([role="switch"])[data-color="gold"]) {
  --ore-checkbox-active-background: var(--ore-color-gold-background);
  --ore-checkbox-active-background-hover: var(
    --ore-color-gold-background-hover
  );
  --ore-checkbox-active-background-pressed: var(
    --ore-color-gold-background-pressed
  );
  --ore-checkbox-active-highlight: var(--ore-color-gold-highlight);
  --ore-checkbox-active-highlight-hover: var(--ore-color-gold-highlight);
  --ore-checkbox-active-highlight-pressed: var(--ore-color-gold-highlight);
}

:where(input.ore-checkbox:not([role="switch"]):focus-visible) {
  border-radius: 0;
  outline: var(--ore-checkbox-unit) solid var(--ore-color-focus-ring);
  outline-offset: 0;
  box-shadow:
    0 0 0 var(--ore-checkbox-unit) var(--ore-color-focus-ring),
    inset 0 0 0 var(--ore-checkbox-unit) var(--ore-checkbox-border),
    inset 0 0 0 calc(var(--ore-checkbox-unit) * 2) var(--ore-checkbox-highlight);
}

:where(input.ore-checkbox:not([role="switch"]):focus-visible:not(:checked)) {
  --ore-checkbox-highlight: var(--ore-color-neutral-50-highlight-focus);
}

:where(input.ore-checkbox:not([role="switch"]):disabled) {
  --ore-checkbox-background: var(--ore-color-disabled);
  --ore-checkbox-highlight: var(--ore-color-disabled);
  --ore-checkbox-border: var(--ore-color-disabled-border);
  --ore-checkbox-indicator: var(--ore-color-disabled-border);

  cursor: not-allowed;
}

:where(label:has(> input.ore-checkbox:not([role="switch"]):disabled)) {
  cursor: not-allowed;
}

:where(.ore-container) {
  --ore-container-unit: var(--ore-size-unit);
  --ore-container-dark-background: var(--ore-color-neutral-surface-raised);
  --ore-container-light-background: var(--ore-color-neutral-surface);
  --ore-container-highlight: var(--ore-color-neutral-specular);
  --ore-container-shadow: var(--ore-color-neutral-bevel-shadow);
  --ore-container-divider: var(--ore-color-neutral-divider);
  --ore-container-foreground: var(--ore-color-foreground);
  --ore-container-padding: calc(var(--ore-container-unit) * 8)
    calc(var(--ore-container-unit) * 11);
  --ore-container-gap: calc(var(--ore-container-unit) * 8);

  display: grid;
  box-sizing: border-box;
  padding: var(--ore-container-padding);
  gap: var(--ore-container-gap);
  color: var(--ore-container-foreground);
  font-family: var(--ore-font-body);
}

:where(
  .ore-container:not([data-variant]),
  .ore-container[data-variant="dark"]
) {
  border-bottom: var(--ore-container-unit) solid var(--ore-container-divider);
  background: var(--ore-container-dark-background);
}

:where(.ore-container[data-variant="light"]) {
  border-top: var(--ore-container-unit) solid var(--ore-container-highlight);
  border-bottom: var(--ore-container-unit) solid var(--ore-container-shadow);
  background: var(--ore-container-light-background);
}

:where(hr.ore-divider) {
  --ore-divider-unit: var(--ore-size-unit);
  --ore-divider-dark: var(--ore-color-gray-80);
  --ore-divider-light: var(--ore-color-gray-60);

  display: block;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--ore-divider-unit) * 2);
  border: 0;
  background: linear-gradient(
    to bottom,
    var(--ore-divider-dark) 0 var(--ore-divider-unit),
    var(--ore-divider-light) var(--ore-divider-unit) 100%
  );
}

:where(.ore-dropdown) {
  --ore-dropdown-unit: var(--ore-size-unit);
  --ore-dropdown-menu-background: var(--ore-color-neutral-surface-deep);
  --ore-dropdown-menu-outline: var(--ore-color-border);
  --ore-dropdown-scrollbar-width: 0px;
  --ore-dropdown-item-background: var(--ore-color-neutral-surface-raised);
  --ore-dropdown-item-background-hover: var(--ore-color-neutral-surface-sunken);
  --ore-dropdown-item-border: var(--ore-color-neutral-specular);
  --ore-dropdown-foreground: var(--ore-color-foreground);
  --ore-dropdown-visible-items: 4;

  display: inline-flex;
  flex-direction: column;
  min-width: calc(var(--ore-dropdown-unit) * 128);
}

:where(.ore-dropdown > .ore-dropdown-trigger) {
  position: relative;
  min-width: 0;
  justify-content: flex-start;
  width: 100%;
  padding-right: calc(var(--ore-dropdown-unit) * 20);
  text-align: left;
}

:where(.ore-dropdown > .ore-dropdown-trigger)::before {
  position: absolute;
  top: var(--ore-button-face-offset);
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 0 0 0 var(--ore-button-unit) var(--ore-button-border);
  content: "";
  pointer-events: none;
}

:where(.ore-dropdown > .ore-dropdown-trigger)::after {
  position: absolute;
  top: calc(50% - var(--ore-button-unit) + var(--ore-button-face-offset));
  right: calc(var(--ore-dropdown-unit) * 10);
  width: calc(var(--ore-dropdown-unit) * 8);
  height: calc(var(--ore-dropdown-unit) * 8);
  background: currentColor;
  mask: url("./icons/chevron-down.svg") center / contain no-repeat;
  transform: translateY(-50%);
  content: "";
}

:where(
  .ore-dropdown:has(> .ore-dropdown-menu:popover-open) > .ore-dropdown-trigger
)::after {
  mask-image: url("./icons/chevron-up.svg");
}

:where(.ore-dropdown > .ore-dropdown-menu) {
  position: fixed;
  inset: auto;
  box-sizing: border-box;
  margin: 0;
  padding: var(--ore-dropdown-unit);
  max-height: calc(
    var(--ore-dropdown-unit) * (var(--ore-dropdown-visible-items) * 18 + 2)
  );
  overflow-y: auto;
  border: 0;
  color: var(--ore-dropdown-foreground);
  background:
    linear-gradient(
        var(--ore-dropdown-menu-outline),
        var(--ore-dropdown-menu-outline)
      )
      left top / calc(100% - var(--ore-dropdown-scrollbar-width))
      var(--ore-dropdown-unit) no-repeat,
    linear-gradient(
        var(--ore-dropdown-menu-outline),
        var(--ore-dropdown-menu-outline)
      )
      left bottom / calc(100% - var(--ore-dropdown-scrollbar-width))
      var(--ore-dropdown-unit) no-repeat,
    linear-gradient(
        var(--ore-dropdown-menu-outline),
        var(--ore-dropdown-menu-outline)
      )
      left top / var(--ore-dropdown-unit) 100% no-repeat,
    linear-gradient(
        var(--ore-dropdown-menu-outline),
        var(--ore-dropdown-menu-outline)
      )
      right var(--ore-dropdown-scrollbar-width) top / var(--ore-dropdown-unit)
      100% no-repeat,
    linear-gradient(
        var(--ore-dropdown-menu-background),
        var(--ore-dropdown-menu-background)
      )
      left top / calc(100% - var(--ore-dropdown-scrollbar-width)) 100% no-repeat;
  font-family: var(--ore-font-body);
}

:where(.ore-dropdown > .ore-dropdown-menu:not(:popover-open)) {
  display: none;
}

:where(.ore-dropdown .ore-dropdown-item) {
  --ore-button-background: transparent;
  --ore-button-border: transparent;
  --ore-button-highlight: transparent;
  --ore-button-shadow: transparent;

  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: calc(var(--ore-dropdown-unit) * 18);
  padding: 0 calc(var(--ore-dropdown-unit) * 18) 0
    calc(var(--ore-dropdown-unit) * 11);
  border: var(--ore-dropdown-unit) solid transparent;
  outline: 0;
  color: inherit;
  background: var(--ore-dropdown-item-background);
  font: inherit;
  font-size: calc(var(--ore-dropdown-unit) * 7);
  line-height: 1;
  text-align: left;
  cursor: pointer;
}

:where(.ore-dropdown .ore-dropdown-item)::before,
:where(.ore-dropdown .ore-dropdown-item)::after {
  content: none;
}

:where(
  .ore-dropdown[data-variant="borderless"] .ore-dropdown-item:focus-visible
),
:where(.ore-dropdown[data-variant="bordered"] .ore-dropdown-item) {
  border-color: var(--ore-dropdown-item-border);
}

:where(
  .ore-dropdown[data-variant="bordered"] .ore-dropdown-item:focus-visible
) {
  background: var(--ore-dropdown-item-background-hover);
}

@media (hover: hover) and (pointer: fine) {
  :where(.ore-dropdown[data-variant="borderless"] .ore-dropdown-item:hover) {
    border-color: var(--ore-dropdown-item-border);
  }

  :where(.ore-dropdown[data-variant="bordered"] .ore-dropdown-item:hover) {
    background: var(--ore-dropdown-item-background-hover);
  }
}

:where(.ore-dropdown[data-variant="borderless"] .ore-dropdown-item:active) {
  border-color: var(--ore-dropdown-item-border);
}

:where(.ore-dropdown[data-variant="bordered"] .ore-dropdown-item:active) {
  background: var(--ore-dropdown-item-background-hover);
}

:where(
  .ore-dropdown[data-variant="bordered"] .ore-dropdown-item + .ore-dropdown-item
) {
  border-top: 0;
}

:where(.ore-dropdown .ore-dropdown-item:focus-visible) {
  outline: 0;
}

:where(.ore-dropdown .ore-dropdown-item:disabled) {
  color: var(--ore-color-disabled-border);
  cursor: not-allowed;
}

:where(.ore-dropdown .ore-dropdown-item[aria-checked="true"])::after {
  position: absolute;
  right: calc(var(--ore-dropdown-unit) * 8);
  width: calc(var(--ore-dropdown-unit) * 8);
  height: calc(var(--ore-dropdown-unit) * 8);
  background: currentColor;
  mask: url("./icons/tick.svg") center / contain no-repeat;
  content: "";
}

@media (prefers-reduced-motion: no-preference) {
  :where(.ore-dropdown > .ore-dropdown-menu:popover-open) {
    animation: ore-dropdown-show var(--ore-motion-fast) steps(2, jump-none);
  }
}

@keyframes ore-dropdown-show {
  from {
    opacity: 0;
  }
}

:where(button.ore-icon-button) {
  --ore-icon-button-unit: var(--ore-size-unit);
  --ore-icon-button-background: var(--ore-color-neutral-surface);
  --ore-icon-button-highlight: var(--ore-color-neutral-specular);
  --ore-icon-button-shadow-color: var(--ore-color-neutral-bevel-shadow);
  --ore-icon-button-corner: var(--ore-color-neutral-corner);
  --ore-icon-button-border: var(--ore-color-border);
  --ore-icon-button-foreground: var(--ore-color-foreground);

  display: inline-grid;
  place-items: var(--ore-icon-button-place-items, center);
  position: relative;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  min-width: 0;
  min-height: 0;
  width: var(--ore-icon-button-width, calc(var(--ore-icon-button-unit) * 18));
  height: var(--ore-icon-button-height, calc(var(--ore-icon-button-unit) * 18));
  padding: var(--ore-icon-button-padding, var(--ore-icon-button-unit));
  color: var(--ore-icon-button-foreground);
  background:
    linear-gradient(
        var(--ore-icon-button-corner),
        var(--ore-icon-button-corner)
      )
      right top / var(--ore-icon-button-unit) var(--ore-icon-button-unit)
      no-repeat,
    linear-gradient(
        var(--ore-icon-button-corner),
        var(--ore-icon-button-corner)
      )
      left bottom / var(--ore-icon-button-unit) var(--ore-icon-button-unit)
      no-repeat,
    linear-gradient(
        var(--ore-icon-button-highlight),
        var(--ore-icon-button-highlight)
      )
      left top / calc(100% - var(--ore-icon-button-unit))
      var(--ore-icon-button-unit) no-repeat,
    linear-gradient(
        var(--ore-icon-button-highlight),
        var(--ore-icon-button-highlight)
      )
      left top / var(--ore-icon-button-unit)
      calc(100% - var(--ore-icon-button-unit)) no-repeat,
    linear-gradient(
        var(--ore-icon-button-shadow-color),
        var(--ore-icon-button-shadow-color)
      )
      right bottom / calc(100% - var(--ore-icon-button-unit))
      var(--ore-icon-button-unit) no-repeat,
    linear-gradient(
        var(--ore-icon-button-shadow-color),
        var(--ore-icon-button-shadow-color)
      )
      right bottom / var(--ore-icon-button-unit)
      calc(100% - var(--ore-icon-button-unit)) no-repeat,
    var(--ore-icon-button-background);
  box-shadow: var(
    --ore-icon-button-box-shadow,
    0 0 0 var(--ore-icon-button-unit) var(--ore-icon-button-border)
  );
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

:where(button.ore-icon-button)::before {
  content: none;
}

:where(button.ore-icon-button > ore-icon) {
  width: calc(var(--ore-icon-button-unit) * 6);
  height: calc(var(--ore-icon-button-unit) * 6);
}

@media (hover: hover) and (pointer: fine) {
  :where(
    button.ore-icon-button:hover:not(:disabled),
    button.ore-icon-button.preview-hover:not(:disabled)
  ) {
    --ore-icon-button-background: var(--ore-color-neutral-background-hover);
    --ore-icon-button-highlight: var(--ore-color-neutral-highlight-hover);
    --ore-icon-button-corner: var(--ore-color-neutral-highlight);
  }
}

:where(
  button.ore-icon-button:active:not(:disabled),
  button.ore-icon-button.preview-pressed:not(:disabled)
) {
  --ore-icon-button-background: var(--ore-color-neutral-background-pressed);
  --ore-icon-button-highlight: var(--ore-color-neutral-shadow);
  --ore-icon-button-shadow-color: var(--ore-color-neutral-highlight-pressed);
  --ore-icon-button-corner: var(--ore-color-neutral-background);

  padding: var(--ore-icon-button-padding, var(--ore-icon-button-unit));
}

:where(
  button.ore-icon-button:focus-visible,
  button.ore-icon-button.preview-focus
) {
  outline: var(--ore-icon-button-unit) solid var(--ore-color-focus-ring);
  outline-offset: var(--ore-icon-button-unit);
}

:where(button.ore-icon-button:disabled) {
  --ore-icon-button-background: var(--ore-color-disabled);
  --ore-icon-button-highlight: var(--ore-color-disabled-border);
  --ore-icon-button-shadow-color: var(--ore-color-disabled-shadow);
  --ore-icon-button-corner: var(--ore-color-neutral-50-highlight-focus);
  --ore-icon-button-border: var(--ore-color-disabled-border);
  --ore-icon-button-foreground: var(--ore-color-disabled-foreground);

  cursor: not-allowed;
}

:where(dialog.ore-modal) {
  --ore-modal-unit: var(--ore-size-unit);
  --ore-modal-border: var(--ore-color-border);
  --ore-modal-section-background: var(--ore-color-neutral-surface);
  --ore-modal-highlight: var(--ore-color-neutral-specular);
  --ore-modal-shadow: var(--ore-color-neutral-bevel-shadow);
  --ore-modal-foreground: var(--ore-color-foreground);
}

:where(dialog.ore-modal) {
  box-sizing: border-box;
  width: min(
    calc(var(--ore-modal-unit) * 200),
    calc(100vw - var(--ore-modal-unit) * 16)
  );
  max-width: none;
  max-height: calc(100dvh - var(--ore-modal-unit) * 16);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: var(--ore-modal-foreground);
  background: transparent;
  font-family: var(--ore-font-body);
}

:where(dialog.ore-modal)::backdrop {
  background: var(--ore-color-overlay);
}

:where(dialog.ore-modal > .ore-modal-content) {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-height: inherit;
  padding: var(--ore-modal-unit);
  overflow: hidden;
  background: var(--ore-modal-border);
}

:where(dialog.ore-modal .modal-form-body) {
  --ore-container-gap: calc(var(--ore-modal-unit) * 8);
  --ore-container-padding: calc(var(--ore-modal-unit) * 8)
    calc(var(--ore-modal-unit) * 11);
  --ore-textfield-width: 100%;
}

:where(dialog.ore-modal .modal-confirmation) {
  --ore-container-gap: 0;
  --ore-container-padding: calc(var(--ore-modal-unit) * 4)
    calc(var(--ore-modal-unit) * 11);

  color: var(--ore-modal-foreground);
}

:where(dialog.ore-modal .modal-actions) {
  --ore-container-gap: calc(var(--ore-modal-unit) * 2);
  --ore-container-padding: calc(var(--ore-modal-unit) * 7)
    calc(var(--ore-modal-unit) * 11);
}

:where(dialog.ore-modal .modal-actions > button) {
  width: 100%;
}

:where(
  dialog.ore-modal > .ore-modal-content > .ore-container[data-variant="dark"]
) {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

:where(
  dialog.ore-modal .ore-modal-header,
  dialog.ore-modal > .ore-modal-content > .ore-container[data-variant="light"]
) {
  flex: none;
}

:where(dialog.ore-modal .ore-modal-header) {
  position: relative;
  display: grid;
  grid-template-columns:
    calc(var(--ore-modal-unit) * 18) 1fr
    calc(var(--ore-modal-unit) * 18);
  align-items: center;
  box-sizing: border-box;
  min-height: calc(var(--ore-modal-unit) * 19);
  padding: var(--ore-modal-unit);
  background: var(--ore-modal-border);
}

:where(dialog.ore-modal .ore-modal-header)::before {
  position: absolute;
  inset: var(--ore-modal-unit);
  background: var(--ore-modal-section-background);
  box-shadow: 0 0 0 var(--ore-modal-unit) var(--ore-modal-highlight);
  content: "";
}

:where(dialog.ore-modal .ore-modal-title) {
  z-index: 1;
  margin: 0;
  font-family: var(--ore-font-body);
  font-size: calc(var(--ore-modal-unit) * 8);
  font-weight: 400;
  line-height: calc(var(--ore-modal-unit) * 10);
  text-align: center;
}

:where(dialog.ore-modal .ore-modal-header-button) {
  z-index: 1;
  display: grid;
  place-items: center;
  width: calc(var(--ore-modal-unit) * 16);
  height: calc(var(--ore-modal-unit) * 16);
  min-width: 0;
  min-height: 0;
  padding: calc(var(--ore-modal-unit) * 4);
  border: 0;
  outline: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

:where(dialog.ore-modal .ore-modal-header-button)::before {
  content: none;
}

:where(dialog.ore-modal .ore-modal-header-button:first-child) {
  margin-inline-start: var(--ore-modal-unit);
}

:where(dialog.ore-modal .ore-modal-header-button:last-child) {
  justify-self: end;
  margin-inline-end: var(--ore-modal-unit);
}

@media (hover: hover) and (pointer: fine) {
  :where(dialog.ore-modal .ore-modal-header-button:hover) {
    background: var(--ore-color-neutral-background-hover);
  }
}

:where(dialog.ore-modal .ore-modal-header-button:active) {
  background: var(--ore-color-neutral-background-pressed);
}

:where(dialog.ore-modal .ore-modal-header-button:focus-visible) {
  outline: var(--ore-modal-unit) solid var(--ore-color-focus-ring);
}

:where(dialog.ore-modal .ore-modal-header-button > :is(ore-icon, svg)) {
  width: calc(var(--ore-modal-unit) * 8);
  height: calc(var(--ore-modal-unit) * 8);
}

:where(dialog.ore-modal .ore-modal-description) {
  margin: 0;
  font-family: "Noto Sans SC", "Noto Sans", sans-serif;
  font-size: calc(var(--ore-modal-unit) * 6);
  line-height: 1.5;
}

@media (prefers-reduced-motion: no-preference) {
  :where(dialog.ore-modal[open]) {
    animation: ore-modal-show var(--ore-motion-fast) steps(2, jump-none);
  }
}

@keyframes ore-modal-show {
  from {
    opacity: 0;
  }
}

:where(nav.ore-navbar) {
  --ore-navbar-unit: var(--ore-size-unit);
  --ore-navbar-background: var(--ore-color-nav-background);
  --ore-navbar-bottom-shadow: var(--ore-color-nav-shadow);
  --ore-navbar-shadow: var(--ore-color-nav-drop-shadow);
  --ore-navbar-foreground: var(--ore-color-neutral-border);
  --ore-navbar-action-background: var(--ore-color-nav-background);
  --ore-navbar-action-highlight: var(--ore-color-nav-action-highlight);
  --ore-navbar-action-shadow: var(--ore-color-nav-action-shadow);
  --ore-navbar-text-offset: calc(var(--ore-navbar-unit) / 2);
  --ore-navbar-icon-offset: 0px;

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  box-sizing: border-box;
  min-height: calc(var(--ore-navbar-unit) * 20);
  padding-bottom: calc(var(--ore-navbar-unit) * 2);
  color: var(--ore-navbar-foreground);
  background: linear-gradient(
    to bottom,
    var(--ore-navbar-background) 0 calc(100% - var(--ore-navbar-unit) * 2),
    var(--ore-navbar-bottom-shadow) calc(100% - var(--ore-navbar-unit) * 2) 100%
  );
  box-shadow: 0 var(--ore-navbar-unit) 0 var(--ore-navbar-shadow);
  font-family: var(--ore-font-body);
}

:where(nav.ore-navbar > .ore-navbar-start) {
  z-index: 1;
  display: flex;
  grid-column: 1;
  align-items: center;
  justify-self: start;
  min-width: 0;
  background: var(--ore-navbar-background);
}

:where(nav.ore-navbar > .ore-navbar-title) {
  position: absolute;
  left: 50%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  font-size: calc(var(--ore-navbar-unit) * 8);
  line-height: calc(var(--ore-navbar-unit) * 10);
  text-align: center;
  text-overflow: ellipsis;
  transform: translate(-50%, var(--ore-navbar-text-offset));
  white-space: nowrap;
}

:where(nav.ore-navbar > .ore-navbar-actions) {
  z-index: 1;
  display: flex;
  grid-column: 2;
  align-self: stretch;
  justify-self: end;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  background: var(--ore-navbar-background);
}

:where(nav.ore-navbar .ore-navbar-button, nav.ore-navbar .ore-navbar-action) {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
  min-height: calc(var(--ore-navbar-unit) * 18);
  padding: 0 calc(var(--ore-navbar-unit) * 5);
  border: 0;
  color: inherit;
  background: var(--ore-navbar-action-background);
  font: inherit;
  font-size: calc(var(--ore-navbar-unit) * 8);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

:where(
  nav.ore-navbar .ore-navbar-button,
  nav.ore-navbar .ore-navbar-action
)::before {
  content: none;
}

:where(nav.ore-navbar .ore-navbar-action-label) {
  transform: translateY(var(--ore-navbar-text-offset));
}

:where(
  nav.ore-navbar .ore-navbar-button > ore-icon,
  nav.ore-navbar .ore-navbar-action > ore-icon
) {
  transform: translateY(var(--ore-navbar-icon-offset));
}

:where(nav.ore-navbar .ore-navbar-button) {
  justify-content: center;
  width: calc(var(--ore-navbar-unit) * 18);
  padding: 0;
}

:where(nav.ore-navbar .ore-navbar-action) {
  gap: calc(var(--ore-navbar-unit) * 4);
  border-left: var(--ore-navbar-unit) solid var(--ore-navbar-action-shadow);
  box-shadow: inset var(--ore-navbar-unit) 0 0
    var(--ore-navbar-action-highlight);
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  :where(
    nav.ore-navbar .ore-navbar-button:hover,
    nav.ore-navbar .ore-navbar-action:hover
  ) {
    filter: brightness(0.96);
  }
}

:where(
  nav.ore-navbar .ore-navbar-button:active,
  nav.ore-navbar .ore-navbar-action:active
) {
  filter: brightness(0.9);
}

:where(
  nav.ore-navbar .ore-navbar-button:focus-visible,
  nav.ore-navbar .ore-navbar-action:focus-visible
) {
  outline: none;
  box-shadow: inset 0 0 0 var(--ore-navbar-unit) var(--ore-color-focus-ring);
}

:where(nav.ore-navbar .ore-navbar-button > ore-icon) {
  width: calc(var(--ore-navbar-unit) * 7);
  height: calc(var(--ore-navbar-unit) * 7);
}

:where(nav.ore-navbar .ore-navbar-action > ore-icon) {
  width: calc(var(--ore-navbar-unit) * 8);
  height: calc(var(--ore-navbar-unit) * 8);
}

:where(progress.ore-progress-bar) {
  --ore-progress-bar-unit: var(--ore-size-unit);
  --ore-progress-bar-frame: currentColor;
  --ore-progress-bar-fill: currentColor;

  appearance: none;
  display: block;
  box-sizing: border-box;
  width: min(100%, calc(var(--ore-progress-bar-unit) * 220));
  height: calc(var(--ore-progress-bar-unit) * 8);
  border: var(--ore-progress-bar-unit) solid var(--ore-progress-bar-frame);
  padding: var(--ore-progress-bar-unit);
  background: transparent;
  color: var(--ore-progress-bar-fill);
}

:where(progress.ore-progress-bar)::-webkit-progress-bar {
  background: transparent;
}

:where(progress.ore-progress-bar)::-webkit-progress-value {
  background: var(--ore-progress-bar-fill);
}

:where(progress.ore-progress-bar)::-moz-progress-bar {
  background: var(--ore-progress-bar-fill);
}

:where(.ore-progress-bar-label) {
  display: block;
  box-sizing: border-box;
  width: min(
    100%,
    calc(var(--ore-progress-bar-unit, var(--ore-size-unit)) * 220)
  );
  margin-block: calc(var(--ore-progress-bar-unit, var(--ore-size-unit)) * 2);
  color: var(--ore-progress-bar-label, currentColor);
  font-family: var(--ore-font-body);
  font-size: calc(var(--ore-progress-bar-unit, var(--ore-size-unit)) * 6);
  line-height: calc(var(--ore-progress-bar-unit, var(--ore-size-unit)) * 7);
  text-align: center;
  white-space: nowrap;
}

:where(.ore-progress-bar-label[data-align="start"]) {
  text-align: start;
}

:where(.ore-progress-bar-label[data-align="end"]) {
  text-align: end;
}

:where(.ore-progress-ring) {
  --ore-progress-ring-frame: 0;

  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  width: 1em;
  height: 1em;
  color: inherit;
  line-height: 1;
  vertical-align: -0.125em;
}

:where(.ore-progress-ring)::before {
  content: "";
  display: block;
  width: 3475%;
  height: 100%;
  background-color: currentColor;
  mask: url("./icons/progress-ring.svg") 0 0 / 100% 100% no-repeat;
  transform: translateX(calc(var(--ore-progress-ring-frame) * -6.4748201439%));
}

:where(input.ore-radio) {
  --ore-radio-unit: var(--ore-size-unit);
  --ore-radio-background: var(--ore-color-neutral-50-background);
  --ore-radio-highlight: var(--ore-color-neutral-50-highlight);
  --ore-radio-border: var(--ore-color-border);
  --ore-radio-indicator-light: var(--ore-color-white);
  --ore-radio-indicator-dim: var(--ore-color-gray-20);
  --ore-radio-indicator-dark: var(--ore-color-gray-30);
  --ore-radio-active-background: var(--ore-color-primary-background);
  --ore-radio-active-background-hover: var(
    --ore-color-primary-background-hover
  );
  --ore-radio-active-background-pressed: var(
    --ore-color-primary-background-pressed
  );
  --ore-radio-active-highlight: var(--ore-color-primary-highlight);
  --ore-radio-active-highlight-hover: var(--ore-color-primary-highlight-hover);
  --ore-radio-active-highlight-pressed: var(
    --ore-color-primary-highlight-pressed
  );

  flex: none;
  appearance: none;
  box-sizing: border-box;
  width: calc(var(--ore-radio-unit) * 9);
  height: calc(var(--ore-radio-unit) * 9);
  margin: 0 calc(var(--ore-radio-unit) * 3.5);
  border: 0;
  border-radius: 0;
  background: var(--ore-radio-background);
  box-shadow:
    inset 0 0 0 var(--ore-radio-unit) var(--ore-radio-border),
    inset 0 0 0 calc(var(--ore-radio-unit) * 2) var(--ore-radio-highlight);
  cursor: pointer;
  transform: rotate(-45deg);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:where(input.ore-radio:checked) {
  background:
    linear-gradient(
        to right,
        var(--ore-radio-indicator-dim) 50%,
        var(--ore-radio-indicator-light) 0
      )
      center calc(50% - var(--ore-radio-unit)) / calc(var(--ore-radio-unit) * 4)
      calc(var(--ore-radio-unit) * 2) no-repeat,
    linear-gradient(
        to right,
        var(--ore-radio-indicator-dark) 50%,
        var(--ore-radio-indicator-dim) 0
      )
      center calc(50% + var(--ore-radio-unit)) / calc(var(--ore-radio-unit) * 4)
      calc(var(--ore-radio-unit) * 2) no-repeat,
    var(--ore-radio-background);
  --ore-radio-background: var(--ore-radio-active-background);
  --ore-radio-highlight: var(--ore-radio-active-highlight);
}

:where(
  input.ore-radio[data-color="secondary"],
  input.ore-radio[data-color="dungeons"],
  input.ore-radio[data-color="legends"],
  input.ore-radio[data-color="gold"]
) {
  --ore-radio-indicator-light: var(--ore-color-gray-80);
  --ore-radio-indicator-dim: var(--ore-color-gray-90);
  --ore-radio-indicator-dark: var(--ore-color-gray-100);
}

:where(label:has(> input.ore-radio)) {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--ore-radio-unit) * 16);
  color: var(--ore-color-border);
  cursor: pointer;
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  :where(input.ore-radio:hover:not(:disabled)) {
    --ore-radio-background: var(--ore-color-neutral-50-background-hover);
    --ore-radio-highlight: var(--ore-color-neutral-50-highlight-hover);
  }

  :where(input.ore-radio:checked:hover:not(:disabled)) {
    --ore-radio-background: var(--ore-radio-active-background-hover);
    --ore-radio-highlight: var(--ore-radio-active-highlight-hover);
  }
}

:where(input.ore-radio:active:not(:disabled)) {
  --ore-radio-background: var(--ore-color-neutral-50-background-pressed);
  --ore-radio-highlight: var(--ore-color-neutral-50-highlight-pressed);
}

:where(input.ore-radio:checked:active:not(:disabled)) {
  --ore-radio-background: var(--ore-radio-active-background-pressed);
  --ore-radio-highlight: var(--ore-radio-active-highlight-pressed);
}

:where(input.ore-radio[data-color="secondary"]) {
  --ore-radio-active-background: var(--ore-color-secondary-background);
  --ore-radio-active-background-hover: var(
    --ore-color-secondary-background-hover
  );
  --ore-radio-active-background-pressed: var(
    --ore-color-secondary-background-pressed
  );
  --ore-radio-active-highlight: var(--ore-color-secondary-highlight);
  --ore-radio-active-highlight-hover: var(
    --ore-color-secondary-highlight-hover
  );
  --ore-radio-active-highlight-pressed: var(
    --ore-color-secondary-highlight-pressed
  );
}

:where(input.ore-radio[data-color="destructive"]) {
  --ore-radio-active-background: var(--ore-color-destructive-background);
  --ore-radio-active-background-hover: var(
    --ore-color-destructive-background-hover
  );
  --ore-radio-active-background-pressed: var(
    --ore-color-destructive-background-pressed
  );
  --ore-radio-active-highlight: var(--ore-color-destructive-highlight);
  --ore-radio-active-highlight-hover: var(--ore-color-destructive-highlight);
  --ore-radio-active-highlight-pressed: var(--ore-color-destructive-highlight);
}

:where(input.ore-radio[data-color="dungeons"]) {
  --ore-radio-active-background: var(--ore-color-dungeons-background);
  --ore-radio-active-background-hover: var(
    --ore-color-dungeons-background-hover
  );
  --ore-radio-active-background-pressed: var(
    --ore-color-dungeons-background-pressed
  );
  --ore-radio-active-highlight: var(--ore-color-dungeons-highlight);
  --ore-radio-active-highlight-hover: var(--ore-color-dungeons-highlight);
  --ore-radio-active-highlight-pressed: var(--ore-color-dungeons-highlight);
}

:where(input.ore-radio[data-color="legends"]) {
  --ore-radio-active-background: var(--ore-color-legends-background);
  --ore-radio-active-background-hover: var(
    --ore-color-legends-background-hover
  );
  --ore-radio-active-background-pressed: var(
    --ore-color-legends-background-pressed
  );
  --ore-radio-active-highlight: var(--ore-color-legends-highlight);
  --ore-radio-active-highlight-hover: var(--ore-color-legends-highlight);
  --ore-radio-active-highlight-pressed: var(--ore-color-legends-highlight);
}

:where(input.ore-radio[data-color="realms"]) {
  --ore-radio-active-background: var(--ore-color-realms-background);
  --ore-radio-active-background-hover: var(--ore-color-realms-background-hover);
  --ore-radio-active-background-pressed: var(
    --ore-color-realms-background-pressed
  );
  --ore-radio-active-highlight: var(--ore-color-realms-highlight);
  --ore-radio-active-highlight-hover: var(--ore-color-realms-highlight);
  --ore-radio-active-highlight-pressed: var(--ore-color-realms-highlight);
}

:where(input.ore-radio[data-color="gold"]) {
  --ore-radio-active-background: var(--ore-color-gold-background);
  --ore-radio-active-background-hover: var(--ore-color-gold-background-hover);
  --ore-radio-active-background-pressed: var(
    --ore-color-gold-background-pressed
  );
  --ore-radio-active-highlight: var(--ore-color-gold-highlight);
  --ore-radio-active-highlight-hover: var(--ore-color-gold-highlight);
  --ore-radio-active-highlight-pressed: var(--ore-color-gold-highlight);
}

:where(input.ore-radio:focus-visible) {
  border-radius: 0;
  outline: var(--ore-radio-unit) solid var(--ore-color-focus-ring);
  outline-offset: 0;
  box-shadow:
    0 0 0 var(--ore-radio-unit) var(--ore-color-focus-ring),
    inset 0 0 0 var(--ore-radio-unit) var(--ore-radio-border),
    inset 0 0 0 calc(var(--ore-radio-unit) * 2) var(--ore-radio-highlight);
}

:where(input.ore-radio:focus-visible:not(:checked)) {
  --ore-radio-highlight: var(--ore-color-neutral-50-highlight-focus);
}

:where(input.ore-radio:disabled) {
  --ore-radio-background: var(--ore-color-disabled);
  --ore-radio-highlight: var(--ore-color-disabled);
  --ore-radio-border: var(--ore-color-disabled-border);

  cursor: not-allowed;
}

:where(label:has(> input.ore-radio:disabled)) {
  cursor: not-allowed;
}

:where(.ore-radio-group) {
  display: grid;
  gap: calc(var(--ore-size-unit) * 4);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

:where(.ore-scrollbar) {
  --ore-scrollbar-unit: var(--ore-size-unit);
  --ore-scrollbar-size: calc(var(--ore-scrollbar-unit) * 6);
  --ore-scrollbar-horizontal-size: calc(var(--ore-scrollbar-unit) * 8);
  --ore-scrollbar-track-size: calc(var(--ore-scrollbar-unit) * 2);
  --ore-scrollbar-thumb-min-size: calc(var(--ore-scrollbar-unit) * 12);
  --ore-scrollbar-track: var(--ore-color-neutral-highlight-pressed);
  --ore-scrollbar-thumb-border: var(--ore-color-border);
  --ore-scrollbar-thumb-highlight: var(--ore-color-secondary-highlight);
  --ore-scrollbar-thumb-background: var(--ore-color-secondary-background);
  --ore-scrollbar-thumb-shadow: var(--ore-color-secondary-shadow);
  --ore-scrollbar-z-index: 1;
}

:where(.ore-scrollbar:not([popover])) {
  display: block;
}

:where(.ore-scrollbar) {
  overflow: auto;
}

@supports (scrollbar-color: red blue) and (-moz-appearance: none) {
  :where(.ore-scrollbar) {
    scrollbar-color: var(--ore-scrollbar-thumb-background)
      var(--ore-scrollbar-track);
    scrollbar-width: auto;
  }

  :where(.ore-scrollbar[data-ore-initialized="scrollbar"]) {
    position: relative;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
  }

  :where(.ore-scrollbar[data-ore-initialized="scrollbar"])::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  :where(.ore-scrollbar[data-ore-initialized="scrollbar"])
    > .ore-scrollbar-track {
    position: sticky;
    z-index: var(--ore-scrollbar-z-index);
    display: block;
    pointer-events: none;
    background: linear-gradient(
        var(--ore-scrollbar-track),
        var(--ore-scrollbar-track)
      )
      center / var(--ore-scrollbar-track-size) 100% no-repeat;
  }

  :where(.ore-scrollbar[data-ore-initialized="scrollbar"])
    > .ore-scrollbar-track[hidden] {
    display: none;
  }

  :where(.ore-scrollbar[data-ore-initialized="scrollbar"])
    > .ore-scrollbar-track-vertical {
    inset: 0 auto auto calc(100% - var(--ore-scrollbar-size));
    width: var(--ore-scrollbar-size);
    height: var(--ore-scrollbar-vertical-track-size);
    margin-bottom: calc(-1 * var(--ore-scrollbar-vertical-track-size));
  }

  :where(.ore-scrollbar[data-ore-initialized="scrollbar"])
    > .ore-scrollbar-track-horizontal {
    inset: auto auto 0 0;
    width: var(--ore-scrollbar-horizontal-track-size);
    height: var(--ore-scrollbar-horizontal-size);
    margin-top: calc(-1 * var(--ore-scrollbar-horizontal-size));
    background-size: 100% var(--ore-scrollbar-track-size);
  }

  :where(.ore-scrollbar[data-ore-initialized="scrollbar"])
    > .ore-scrollbar-track
    > .ore-scrollbar-thumb {
    position: absolute;
    display: block;
    pointer-events: auto;
    border-radius: 0;
    background:
      linear-gradient(
          var(--ore-scrollbar-thumb-background),
          var(--ore-scrollbar-thumb-background)
        )
        center calc(var(--ore-scrollbar-unit) * 2) /
        calc(100% - var(--ore-scrollbar-unit) * 4)
        calc(100% - var(--ore-scrollbar-unit) * 6) no-repeat,
      linear-gradient(
          var(--ore-scrollbar-thumb-shadow),
          var(--ore-scrollbar-thumb-shadow)
        )
        center bottom var(--ore-scrollbar-unit) /
        calc(100% - var(--ore-scrollbar-unit) * 2)
        calc(var(--ore-scrollbar-unit) * 2) no-repeat,
      linear-gradient(
          var(--ore-scrollbar-thumb-highlight),
          var(--ore-scrollbar-thumb-highlight)
        )
        center var(--ore-scrollbar-unit) /
        calc(100% - var(--ore-scrollbar-unit) * 2)
        calc(100% - var(--ore-scrollbar-unit) * 4) no-repeat,
      var(--ore-scrollbar-thumb-border);
    touch-action: none;
  }

  :where(.ore-scrollbar[data-ore-initialized="scrollbar"])
    > .ore-scrollbar-track
    > .ore-scrollbar-thumb-vertical {
    inset: 0 0 auto;
    width: 100%;
  }

  :where(.ore-scrollbar[data-ore-initialized="scrollbar"])
    > .ore-scrollbar-track
    > .ore-scrollbar-thumb-horizontal {
    inset: 0 auto auto 0;
    height: 100%;
  }
}

:where(.ore-scrollbar)::-webkit-scrollbar {
  width: var(--ore-scrollbar-size);
  height: var(--ore-scrollbar-horizontal-size);
}

:where(.ore-scrollbar)::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

:where(.ore-scrollbar)::-webkit-scrollbar-track:vertical {
  background: linear-gradient(
      var(--ore-scrollbar-track),
      var(--ore-scrollbar-track)
    )
    center / var(--ore-scrollbar-track-size) 100% no-repeat;
}

:where(.ore-scrollbar)::-webkit-scrollbar-track:horizontal {
  background: linear-gradient(
      var(--ore-scrollbar-track),
      var(--ore-scrollbar-track)
    )
    center / 100% var(--ore-scrollbar-track-size) no-repeat;
}

:where(.ore-scrollbar)::-webkit-scrollbar-thumb:vertical {
  min-height: var(--ore-scrollbar-thumb-min-size);
  border-radius: 0;
  background:
    linear-gradient(
        var(--ore-scrollbar-thumb-background),
        var(--ore-scrollbar-thumb-background)
      )
      center calc(var(--ore-scrollbar-unit) * 2) /
      calc(100% - var(--ore-scrollbar-unit) * 4)
      calc(100% - var(--ore-scrollbar-unit) * 6) no-repeat,
    linear-gradient(
        var(--ore-scrollbar-thumb-shadow),
        var(--ore-scrollbar-thumb-shadow)
      )
      center bottom var(--ore-scrollbar-unit) /
      calc(100% - var(--ore-scrollbar-unit) * 2)
      calc(var(--ore-scrollbar-unit) * 2) no-repeat,
    linear-gradient(
        var(--ore-scrollbar-thumb-highlight),
        var(--ore-scrollbar-thumb-highlight)
      )
      center var(--ore-scrollbar-unit) /
      calc(100% - var(--ore-scrollbar-unit) * 2)
      calc(100% - var(--ore-scrollbar-unit) * 4) no-repeat,
    var(--ore-scrollbar-thumb-border);
}

:where(.ore-scrollbar)::-webkit-scrollbar-thumb:horizontal {
  min-width: var(--ore-scrollbar-thumb-min-size);
  border-radius: 0;
  background:
    linear-gradient(
        var(--ore-scrollbar-thumb-background),
        var(--ore-scrollbar-thumb-background)
      )
      center calc(var(--ore-scrollbar-unit) * 2) /
      calc(100% - var(--ore-scrollbar-unit) * 4)
      calc(var(--ore-scrollbar-unit) * 2) no-repeat,
    linear-gradient(
        var(--ore-scrollbar-thumb-shadow),
        var(--ore-scrollbar-thumb-shadow)
      )
      center bottom var(--ore-scrollbar-unit) /
      calc(100% - var(--ore-scrollbar-unit) * 2)
      calc(var(--ore-scrollbar-unit) * 2) no-repeat,
    linear-gradient(
        var(--ore-scrollbar-thumb-highlight),
        var(--ore-scrollbar-thumb-highlight)
      )
      center var(--ore-scrollbar-unit) /
      calc(100% - var(--ore-scrollbar-unit) * 2)
      calc(var(--ore-scrollbar-unit) * 4) no-repeat,
    var(--ore-scrollbar-thumb-border);
}

:where(.ore-scrollbar)::-webkit-scrollbar-corner {
  background: transparent;
}

:where(select.ore-select:not([multiple], [size])) {
  --ore-select-unit: var(--ore-size-unit);
  --ore-select-background-default: var(--ore-color-secondary-background);
  --ore-select-background-hover: var(--ore-color-secondary-background-hover);
  --ore-select-background-pressed: var(
    --ore-color-secondary-background-pressed
  );
  --ore-select-highlight-default: var(--ore-color-secondary-highlight);
  --ore-select-highlight-hover: var(--ore-color-secondary-highlight-hover);
  --ore-select-highlight-pressed: var(--ore-color-secondary-highlight-pressed);
  --ore-select-background: var(--ore-select-background-default);
  --ore-select-highlight: var(--ore-select-highlight-default);
  --ore-select-border: var(--ore-color-border);
  --ore-select-shadow: var(--ore-color-secondary-shadow);
  --ore-select-foreground: var(--ore-color-border);
  --ore-select-face-offset: 0px;

  appearance: none;
  box-sizing: border-box;
  min-width: calc(var(--ore-select-unit) * 128);
  min-height: calc(var(--ore-select-unit) * 22);
  padding: 0 calc(var(--ore-select-unit) * 28) calc(var(--ore-select-unit) * 2)
    calc(var(--ore-select-unit) * 8);
  border: 0;
  border-radius: 0;
  outline: 0;
  color: var(--ore-select-foreground);
  background:
    url("./icons/chevron-down.svg") right
      calc(var(--ore-select-unit) * 10) top
      calc(50% - var(--ore-select-unit) + var(--ore-select-face-offset)) /
      calc(var(--ore-select-unit) * 8) calc(var(--ore-select-unit) * 8)
      no-repeat,
    linear-gradient(var(--ore-select-border), var(--ore-select-border)) center
      var(--ore-select-face-offset) / 100% var(--ore-select-unit) no-repeat,
    linear-gradient(var(--ore-select-border), var(--ore-select-border)) center
      bottom / 100% var(--ore-select-unit) no-repeat,
    linear-gradient(var(--ore-select-border), var(--ore-select-border)) left
      var(--ore-select-face-offset) / var(--ore-select-unit)
      calc(100% - var(--ore-select-face-offset)) no-repeat,
    linear-gradient(var(--ore-select-border), var(--ore-select-border)) right
      var(--ore-select-face-offset) / var(--ore-select-unit)
      calc(100% - var(--ore-select-face-offset)) no-repeat,
    linear-gradient(var(--ore-select-shadow), var(--ore-select-shadow)) center
      calc(100% - var(--ore-select-unit)) /
      calc(100% - var(--ore-select-unit) * 2) calc(var(--ore-select-unit) * 2)
      no-repeat,
    linear-gradient(var(--ore-select-highlight), var(--ore-select-highlight))
      center calc(var(--ore-select-unit) + var(--ore-select-face-offset)) /
      calc(100% - var(--ore-select-unit) * 2) var(--ore-select-unit) no-repeat,
    linear-gradient(var(--ore-select-highlight), var(--ore-select-highlight))
      center
      calc(100% - var(--ore-select-unit) * 3 + var(--ore-select-face-offset)) /
      calc(100% - var(--ore-select-unit) * 2) var(--ore-select-unit) no-repeat,
    linear-gradient(var(--ore-select-highlight), var(--ore-select-highlight))
      left calc(var(--ore-select-unit) + var(--ore-select-face-offset)) /
      calc(var(--ore-select-unit) * 2)
      calc(100% - var(--ore-select-unit) * 4 - 1px) no-repeat,
    linear-gradient(var(--ore-select-highlight), var(--ore-select-highlight))
      right calc(var(--ore-select-unit) + var(--ore-select-face-offset)) /
      calc(var(--ore-select-unit) * 2)
      calc(100% - var(--ore-select-unit) * 4 - 1px) no-repeat,
    linear-gradient(var(--ore-select-background), var(--ore-select-background))
      center var(--ore-select-face-offset) / 100%
      calc(100% - var(--ore-select-face-offset)) no-repeat;
  font-family: var(--ore-font-body);
  font-size: calc(var(--ore-select-unit) * 7);
  font-weight: 400;
  line-height: 1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  :where(select.ore-select:not([multiple], [size]):hover:not(:disabled)) {
    --ore-select-background: var(--ore-select-background-hover);
    --ore-select-highlight: var(--ore-select-highlight-hover);
  }
}

:where(select.ore-select:not([multiple], [size]):active:not(:disabled)) {
  --ore-select-background: var(--ore-select-background-pressed);
  --ore-select-highlight: var(--ore-select-highlight-pressed);
  --ore-select-shadow: transparent;
  --ore-select-face-offset: calc(var(--ore-select-unit) * 2);

  padding-top: var(--ore-select-face-offset);
  padding-bottom: 0;
}

:where(select.ore-select:not([multiple], [size]):focus-visible) {
  box-shadow: 0 0 0 var(--ore-select-unit) var(--ore-color-focus-ring);
}

:where(select.ore-select:not([multiple], [size]):disabled) {
  --ore-select-background: var(--ore-color-disabled);
  --ore-select-highlight: var(--ore-color-disabled);
  --ore-select-border: var(--ore-color-disabled-border);
  --ore-select-shadow: var(--ore-color-secondary-background-pressed);
  --ore-select-foreground: var(--ore-color-disabled-foreground);

  cursor: not-allowed;
}

:where(select.ore-select:not([multiple], [size])) option {
  color: CanvasText;
  background: Canvas;
  font-family: var(--ore-font-body);
}

:where(input.ore-slider) {
  --ore-slider-unit: var(--ore-size-unit);
  --ore-slider-progress-end: 0;
  --ore-slider-segment-size: 10%;
  --ore-slider-value-end: calc(
    var(--ore-slider-unit) * 7.25 + (100% - var(--ore-slider-unit) * 14.5) *
      var(--ore-slider-progress-end)
  );
  --ore-slider-track-border: var(--ore-color-border);
  --ore-slider-active-range-background: var(--ore-color-primary-background);
  --ore-slider-active-range-highlight: var(--ore-color-primary-highlight);
  --ore-slider-range-background: var(--ore-slider-active-range-background);
  --ore-slider-range-highlight: var(--ore-slider-active-range-highlight);
  --ore-slider-track-background: var(--ore-color-neutral-50-background);
  --ore-slider-track-highlight: var(--ore-color-neutral-50-highlight-focus);
  --ore-slider-thumb-background: var(--ore-color-secondary-background);
  --ore-slider-thumb-highlight: var(--ore-color-secondary-highlight);
  --ore-slider-thumb-shadow: var(--ore-color-secondary-shadow);
  --ore-slider-thumb-border: var(--ore-color-border);
  --ore-slider-thumb-focus-ring: transparent;
  --ore-slider-segment-edge: transparent;
  --ore-slider-thumb-image:
    linear-gradient(
        var(--ore-slider-thumb-background),
        var(--ore-slider-thumb-background)
      )
      center calc(var(--ore-slider-unit) * 2) /
      calc(var(--ore-slider-unit) * 10.5) calc(var(--ore-slider-unit) * 8.5)
      no-repeat,
    linear-gradient(
        var(--ore-slider-thumb-shadow),
        var(--ore-slider-thumb-shadow)
      )
      center calc(var(--ore-slider-unit) * 11.5) /
      calc(var(--ore-slider-unit) * 12.5) calc(var(--ore-slider-unit) * 2)
      no-repeat,
    linear-gradient(
        var(--ore-slider-thumb-highlight),
        var(--ore-slider-thumb-highlight)
      )
      center var(--ore-slider-unit) / calc(var(--ore-slider-unit) * 12.5)
      calc(var(--ore-slider-unit) * 10.5) no-repeat,
    var(--ore-slider-thumb-border);
  --ore-slider-segments: linear-gradient(transparent, transparent);

  width: min(100%, calc(var(--ore-slider-unit) * 254.5));
  height: calc(var(--ore-slider-unit) * 14.5);
  margin: 0;
  padding: 0;
  appearance: none;
  background:
    var(--ore-slider-segments) center / 100% calc(var(--ore-slider-unit) * 3.5)
      no-repeat,
    linear-gradient(
        to right,
        var(--ore-slider-range-background) 0 var(--ore-slider-value-end),
        var(--ore-slider-track-background) var(--ore-slider-value-end) 100%
      )
      center / calc(100% - var(--ore-slider-unit) * 4)
      calc(var(--ore-slider-unit) * 1.5) no-repeat,
    linear-gradient(
        to right,
        var(--ore-slider-range-highlight) 0 var(--ore-slider-value-end),
        var(--ore-slider-track-highlight) var(--ore-slider-value-end) 100%
      )
      center / calc(100% - var(--ore-slider-unit) * 2)
      calc(var(--ore-slider-unit) * 3.5) no-repeat,
    linear-gradient(
        var(--ore-slider-track-border),
        var(--ore-slider-track-border)
      )
      center / 100% calc(var(--ore-slider-unit) * 5.5) no-repeat;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:where(input.ore-slider[data-variant="segmented"]) {
  --ore-slider-segment-gap: calc(
    var(--ore-slider-segment-size) - var(--ore-slider-unit) * 0.9
  );
  --ore-slider-segment-period: calc(
    var(--ore-slider-segment-size) + var(--ore-slider-unit) * 0.1
  );
  --ore-slider-segments: repeating-linear-gradient(
    to right,
    transparent 0 var(--ore-slider-segment-gap),
    var(--ore-slider-track-border) var(--ore-slider-segment-gap)
      calc(var(--ore-slider-segment-gap) + var(--ore-slider-unit)),
    transparent calc(var(--ore-slider-segment-gap) + var(--ore-slider-unit))
      var(--ore-slider-segment-period)
  );
}

:where(input.ore-slider[data-color="secondary"]) {
  --ore-slider-active-range-background: var(--ore-color-secondary-background);
  --ore-slider-active-range-highlight: var(--ore-color-secondary-highlight);
}

:where(input.ore-slider[data-color="destructive"]) {
  --ore-slider-active-range-background: var(--ore-color-destructive-background);
  --ore-slider-active-range-highlight: var(--ore-color-destructive-highlight);
}

:where(input.ore-slider[data-color="dungeons"]) {
  --ore-slider-active-range-background: var(--ore-color-dungeons-background);
  --ore-slider-active-range-highlight: var(--ore-color-dungeons-highlight);
}

:where(input.ore-slider[data-color="legends"]) {
  --ore-slider-active-range-background: var(--ore-color-legends-background);
  --ore-slider-active-range-highlight: var(--ore-color-legends-highlight);
}

:where(input.ore-slider[data-color="realms"]) {
  --ore-slider-active-range-background: var(--ore-color-realms-background);
  --ore-slider-active-range-highlight: var(--ore-color-realms-highlight);
}

:where(input.ore-slider[data-color="gold"]) {
  --ore-slider-active-range-background: var(--ore-color-gold-background);
  --ore-slider-active-range-highlight: var(--ore-color-gold-highlight);
}

:where(input.ore-slider[data-orientation="vertical"]) {
  width: calc(var(--ore-slider-unit) * 14.5);
  height: calc(var(--ore-slider-unit) * 127.25);
  background:
    var(--ore-slider-segments) center / calc(var(--ore-slider-unit) * 3.5) 100%
      no-repeat,
    linear-gradient(
        to top,
        var(--ore-slider-range-background) 0 var(--ore-slider-value-end),
        var(--ore-slider-track-background) var(--ore-slider-value-end) 100%
      )
      center / calc(var(--ore-slider-unit) * 1.5)
      calc(100% - var(--ore-slider-unit) * 4) no-repeat,
    linear-gradient(
        to top,
        var(--ore-slider-range-highlight) 0 var(--ore-slider-value-end),
        var(--ore-slider-track-highlight) var(--ore-slider-value-end) 100%
      )
      center / calc(var(--ore-slider-unit) * 3.5)
      calc(100% - var(--ore-slider-unit) * 2) no-repeat,
    linear-gradient(
        var(--ore-slider-track-border),
        var(--ore-slider-track-border)
      )
      center / calc(var(--ore-slider-unit) * 5.5) 100% no-repeat;
  writing-mode: vertical-lr;
  direction: rtl;
}

:where(
  input.ore-slider[data-orientation="vertical"][data-variant="segmented"]
) {
  --ore-slider-segment-gap: calc(
    var(--ore-slider-segment-size) - var(--ore-slider-unit) * 0.9
  );
  --ore-slider-segment-period: calc(
    var(--ore-slider-segment-size) + var(--ore-slider-unit) * 0.1
  );
  --ore-slider-segments: repeating-linear-gradient(
    to top,
    transparent 0 var(--ore-slider-segment-gap),
    var(--ore-slider-track-border) var(--ore-slider-segment-gap)
      calc(var(--ore-slider-segment-gap) + var(--ore-slider-unit)),
    transparent calc(var(--ore-slider-segment-gap) + var(--ore-slider-unit))
      var(--ore-slider-segment-period)
  );
}

:where(input.ore-slider)::-webkit-slider-runnable-track {
  height: calc(var(--ore-slider-unit) * 5.5);
  background: transparent;
}

:where(
  input.ore-slider[data-orientation="vertical"]
)::-webkit-slider-runnable-track {
  width: calc(var(--ore-slider-unit) * 5.5);
  height: 100%;
}

:where(input.ore-slider)::-moz-range-track {
  height: calc(var(--ore-slider-unit) * 5.5);
  background: transparent;
}

:where(input.ore-slider[data-orientation="vertical"])::-moz-range-track {
  width: calc(var(--ore-slider-unit) * 5.5);
  height: 100%;
}

:where(input.ore-slider)::-webkit-slider-thumb {
  width: calc(var(--ore-slider-unit) * 14.5);
  height: calc(var(--ore-slider-unit) * 14.5);
  margin-top: calc(var(--ore-slider-unit) * -4.5);
  appearance: none;
  border: 0;
  border-radius: 0;
  background: var(--ore-slider-thumb-image);
  box-shadow: 0 0 0 var(--ore-slider-unit) var(--ore-slider-thumb-focus-ring);
}

:where(input.ore-slider[data-orientation="vertical"])::-webkit-slider-thumb {
  margin-top: 0;
  margin-left: calc(var(--ore-slider-unit) * -4.5);
}

:where(input.ore-slider)::-moz-range-thumb {
  width: calc(var(--ore-slider-unit) * 14.5);
  height: calc(var(--ore-slider-unit) * 14.5);
  appearance: none;
  border: 0;
  border-radius: 0;
  background: var(--ore-slider-thumb-image);
  box-shadow: 0 0 0 var(--ore-slider-unit) var(--ore-slider-thumb-focus-ring);
}

@media (hover: hover) and (pointer: fine) {
  :where(input.ore-slider:hover:not(:disabled)) {
    --ore-slider-thumb-background: var(--ore-color-secondary-background-hover);
    --ore-slider-thumb-highlight: var(--ore-color-secondary-highlight-hover);
  }
}

:where(input.ore-slider:active:not(:disabled)) {
  --ore-slider-thumb-background: var(--ore-color-secondary-background-pressed);
  --ore-slider-thumb-highlight: var(--ore-color-secondary-highlight-pressed);
}

:where(input.ore-slider:focus-visible) {
  --ore-slider-thumb-highlight: color-mix(
    in srgb,
    var(--ore-color-secondary-background),
    var(--ore-color-white) 60%
  );
  --ore-slider-thumb-focus-ring: var(--ore-color-focus-ring);

  outline: none;
}

:where(input.ore-slider:disabled) {
  --ore-slider-track-border: var(--ore-color-disabled-border);
  --ore-slider-range-background: var(--ore-color-disabled);
  --ore-slider-range-highlight: color-mix(
    in srgb,
    var(--ore-color-disabled),
    var(--ore-color-white) 10%
  );
  --ore-slider-track-background: var(--ore-color-disabled);
  --ore-slider-track-highlight: color-mix(
    in srgb,
    var(--ore-color-disabled),
    var(--ore-color-white) 20%
  );
  --ore-slider-thumb-background: var(--ore-color-disabled);
  --ore-slider-thumb-highlight: color-mix(
    in srgb,
    var(--ore-color-disabled),
    var(--ore-color-white) 60%
  );
  --ore-slider-thumb-shadow: var(--ore-color-disabled-shadow);
  --ore-slider-thumb-border: var(--ore-color-disabled-border);

  cursor: not-allowed;
}

:where(.ore-spinner) {
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  width: 1em;
  height: 1em;
  color: inherit;
  line-height: 1;
  vertical-align: -0.125em;
}

:where(.ore-spinner)::before {
  content: "";
  display: block;
  width: 3475%;
  height: 100%;
  background-color: currentColor;
  mask: url("./icons/spinner.svg") 0 0 / 100% 100% no-repeat;
  animation: ore-spinner 800ms steps(15, jump-end) infinite;
}

@keyframes ore-spinner {
  to {
    transform: translateX(-97.122302%);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.ore-spinner)::before {
    animation: none;
  }
}

:where(input.ore-switch[role="switch"]) {
  --ore-switch-unit: var(--ore-size-unit);
  --ore-switch-track-background: var(--ore-color-neutral-50-background);
  --ore-switch-track-highlight: var(--ore-color-neutral-50-highlight-focus);
  --ore-switch-track-border: var(--ore-color-border);
  --ore-switch-thumb-background: var(--ore-color-secondary-background);
  --ore-switch-thumb-highlight: var(--ore-color-secondary-highlight);
  --ore-switch-thumb-shadow: var(--ore-color-secondary-shadow);
  --ore-switch-thumb-border: var(--ore-color-border);
  --ore-switch-active-track-background: var(--ore-color-primary-background);
  --ore-switch-active-track-highlight: var(--ore-color-primary-highlight);
  --ore-switch-thumb-focus-ring: transparent;
  --ore-switch-icon: var(--ore-color-gray-90);

  position: relative;
  flex: none;
  appearance: none;
  box-sizing: border-box;
  width: calc(var(--ore-switch-unit) * 28);
  height: calc(var(--ore-switch-unit) * 15);
  margin: 0 calc(var(--ore-switch-unit) * 4) 0 0;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(
        var(--ore-switch-track-background),
        var(--ore-switch-track-background)
      )
      right calc(var(--ore-switch-unit) * 2) bottom
      calc(var(--ore-switch-unit) * 2) / calc(var(--ore-switch-unit) * 11)
      calc(var(--ore-switch-unit) * 9) no-repeat,
    linear-gradient(
        var(--ore-switch-track-highlight),
        var(--ore-switch-track-highlight)
      )
      right var(--ore-switch-unit) bottom var(--ore-switch-unit) /
      calc(var(--ore-switch-unit) * 12) calc(var(--ore-switch-unit) * 11)
      no-repeat,
    linear-gradient(
        var(--ore-switch-track-border),
        var(--ore-switch-track-border)
      )
      right bottom / calc(var(--ore-switch-unit) * 13)
      calc(var(--ore-switch-unit) * 13) no-repeat;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:where(input.ore-switch[role="switch"])::after {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--ore-switch-unit) * 15);
  height: calc(var(--ore-switch-unit) * 15);
  background:
    linear-gradient(
        var(--ore-switch-thumb-background),
        var(--ore-switch-thumb-background)
      )
      center calc(var(--ore-switch-unit) * 2) /
      calc(var(--ore-switch-unit) * 11) calc(var(--ore-switch-unit) * 9)
      no-repeat,
    linear-gradient(
        var(--ore-switch-thumb-shadow),
        var(--ore-switch-thumb-shadow)
      )
      center calc(var(--ore-switch-unit) * 12) /
      calc(var(--ore-switch-unit) * 13) calc(var(--ore-switch-unit) * 2)
      no-repeat,
    linear-gradient(
        var(--ore-switch-thumb-highlight),
        var(--ore-switch-thumb-highlight)
      )
      center var(--ore-switch-unit) / calc(var(--ore-switch-unit) * 13)
      calc(var(--ore-switch-unit) * 11) no-repeat,
    var(--ore-switch-thumb-border);
  box-shadow: 0 0 0 var(--ore-switch-unit) var(--ore-switch-thumb-focus-ring);
  content: "";
}

:where(input.ore-switch[role="switch"]:checked)::after {
  left: calc(var(--ore-switch-unit) * 13);
}

:where(input.ore-switch[role="switch"]:checked) {
  background-position:
    left calc(var(--ore-switch-unit) * 2) bottom
      calc(var(--ore-switch-unit) * 2),
    left var(--ore-switch-unit) bottom var(--ore-switch-unit),
    left bottom;
  --ore-switch-track-background: var(--ore-switch-active-track-background);
  --ore-switch-track-highlight: var(--ore-switch-active-track-highlight);
  --ore-switch-icon: var(--ore-color-white);
}

:where(input.ore-switch[role="switch"][data-color="secondary"]) {
  --ore-switch-active-track-background: var(--ore-color-secondary-background);
  --ore-switch-active-track-highlight: var(--ore-color-secondary-highlight);
}

:where(input.ore-switch[role="switch"][data-color="destructive"]) {
  --ore-switch-active-track-background: var(--ore-color-destructive-background);
  --ore-switch-active-track-highlight: var(--ore-color-destructive-highlight);
}

:where(input.ore-switch[role="switch"][data-color="dungeons"]) {
  --ore-switch-active-track-background: var(--ore-color-dungeons-background);
  --ore-switch-active-track-highlight: var(--ore-color-dungeons-highlight);
}

:where(input.ore-switch[role="switch"][data-color="legends"]) {
  --ore-switch-active-track-background: var(--ore-color-legends-background);
  --ore-switch-active-track-highlight: var(--ore-color-legends-highlight);
}

:where(input.ore-switch[role="switch"][data-color="realms"]) {
  --ore-switch-active-track-background: var(--ore-color-realms-background);
  --ore-switch-active-track-highlight: var(--ore-color-realms-highlight);
}

:where(input.ore-switch[role="switch"][data-color="gold"]) {
  --ore-switch-active-track-background: var(--ore-color-gold-background);
  --ore-switch-active-track-highlight: var(--ore-color-gold-highlight);
}

:where(
  input.ore-switch[role="switch"][data-color="secondary"],
  input.ore-switch[role="switch"][data-color="dungeons"],
  input.ore-switch[role="switch"][data-color="legends"],
  input.ore-switch[role="switch"][data-color="gold"]
) {
  --ore-switch-icon: var(--ore-color-gray-100);
}

:where(input.ore-switch[role="switch"][data-variant="icons"])::before {
  position: absolute;
  top: calc(var(--ore-switch-unit) * 4.5);
  right: calc(var(--ore-switch-unit) * 3);
  width: calc(var(--ore-switch-unit) * 8);
  height: calc(var(--ore-switch-unit) * 8);
  background: var(--ore-switch-icon);
  content: "";
  mask: url("./icons/off.svg") center / contain no-repeat;
}

:where(input.ore-switch[role="switch"][data-variant="icons"]:checked)::before {
  left: calc(var(--ore-switch-unit) * 3);
  right: auto;
  mask-image: url("./icons/on.svg");
}

:where(label:has(> input.ore-switch[role="switch"])) {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ore-switch-unit) * 4);
  min-height: calc(var(--ore-switch-unit) * 15);
  color: var(--ore-color-border);
  cursor: pointer;
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  :where(input.ore-switch[role="switch"]:hover:not(:disabled)) {
    --ore-switch-thumb-background: var(--ore-color-secondary-background-hover);
    --ore-switch-thumb-highlight: color-mix(
      in srgb,
      var(--ore-color-secondary-background-hover),
      var(--ore-color-white) 60%
    );
  }
}

:where(input.ore-switch[role="switch"]:active:not(:disabled)) {
  --ore-switch-thumb-background: var(--ore-color-secondary-background-pressed);
  --ore-switch-thumb-highlight: color-mix(
    in srgb,
    var(--ore-color-secondary-background-pressed),
    var(--ore-color-white) 40%
  );
}

:where(input.ore-switch[role="switch"]:focus-visible) {
  --ore-switch-thumb-highlight: color-mix(
    in srgb,
    var(--ore-color-secondary-background),
    var(--ore-color-white) 60%
  );
  --ore-switch-thumb-focus-ring: var(--ore-color-focus-ring);

  border-radius: 0;
  outline: var(--ore-switch-unit) solid var(--ore-color-focus-ring);
  outline-offset: 0;
}

:where(input.ore-switch[role="switch"]:disabled) {
  --ore-switch-track-background: var(--ore-color-disabled);
  --ore-switch-track-highlight: var(--ore-color-disabled);
  --ore-switch-track-border: var(--ore-color-disabled-border);
  --ore-switch-thumb-background: var(--ore-color-disabled);
  --ore-switch-thumb-highlight: var(--ore-color-disabled);
  --ore-switch-thumb-shadow: var(--ore-color-disabled-shadow);
  --ore-switch-thumb-border: var(--ore-color-disabled-border);
  --ore-switch-icon: var(--ore-color-disabled-foreground);

  cursor: not-allowed;
}

:where(label:has(> input.ore-switch[role="switch"]:disabled)) {
  cursor: not-allowed;
}

:where(.ore-tab-button) {
  --ore-tab-off-background: var(--ore-color-neutral-background);
  --ore-tab-off-background-hover: var(--ore-color-neutral-background-hover);
  --ore-tab-off-background-pressed: var(--ore-color-neutral-background-pressed);
  --ore-tab-off-highlight: var(--ore-color-neutral-highlight);
  --ore-tab-off-highlight-hover: var(--ore-color-neutral-highlight-hover);
  --ore-tab-off-highlight-pressed: var(--ore-color-neutral-highlight-pressed);
  --ore-tab-off-shadow: var(--ore-color-neutral-shadow);
  --ore-tab-off-foreground: var(--ore-color-foreground);
  --ore-tab-on-background: var(--ore-color-neutral-surface-raised);
  --ore-tab-on-highlight: var(--ore-color-neutral-specular);
  --ore-tab-on-foreground: var(--ore-color-neutral-text);
  --ore-tab-indicator: var(--ore-color-white);
  --ore-button-background-default: var(--ore-tab-off-background);
  --ore-button-background-hover: var(--ore-tab-off-background-hover);
  --ore-button-background-pressed: var(--ore-tab-off-background-pressed);
  --ore-button-highlight-default: var(--ore-tab-off-highlight);
  --ore-button-highlight-hover: var(--ore-tab-off-highlight-hover);
  --ore-button-highlight-pressed: var(--ore-tab-off-highlight-pressed);
  --ore-button-shadow: var(--ore-tab-off-shadow);
  --ore-button-foreground: var(--ore-tab-off-foreground);

  position: relative;
  align-self: flex-end;
}

:where(.ore-tab-button[aria-selected="true"]) {
  --ore-button-background-default: var(--ore-tab-on-background);
  --ore-button-background-hover: var(--ore-tab-on-background);
  --ore-button-background-pressed: var(--ore-tab-on-background);
  --ore-button-highlight-default: var(--ore-tab-on-highlight);
  --ore-button-highlight-hover: var(--ore-tab-on-highlight);
  --ore-button-highlight-pressed: var(--ore-tab-on-highlight);
  --ore-button-background: var(--ore-tab-on-background);
  --ore-button-highlight: var(--ore-tab-on-highlight);
  --ore-button-border: var(--ore-color-border);
  --ore-button-shadow: transparent;
  --ore-button-foreground: var(--ore-tab-on-foreground);

  height: calc(var(--ore-button-unit) * 22);
  min-height: 0;
  padding-top: calc(var(--ore-button-unit) * 2);
  padding-bottom: 0;
  background:
    linear-gradient(var(--ore-button-background), var(--ore-button-background))
      center calc(100% - var(--ore-button-unit) * 2) /
      calc(100% - var(--ore-button-unit) * 4)
      calc(100% - var(--ore-button-unit) * 6) no-repeat,
    linear-gradient(var(--ore-button-highlight), var(--ore-button-highlight))
      center calc(100% - var(--ore-button-unit)) /
      calc(100% - var(--ore-button-unit) * 2)
      calc(100% - var(--ore-button-unit) * 4) no-repeat,
    linear-gradient(var(--ore-button-border), var(--ore-button-border)) center
      bottom / 100% calc(100% - var(--ore-button-unit) * 2) no-repeat;
}

:where(.ore-tab-button[data-palette="toggle"]) {
  --ore-tab-off-background: var(--ore-color-secondary-background);
  --ore-tab-off-background-hover: var(--ore-color-secondary-background-hover);
  --ore-tab-off-background-pressed: var(--ore-color-secondary-background);
  --ore-tab-off-highlight: var(--ore-color-secondary-highlight);
  --ore-tab-off-highlight-hover: var(--ore-color-secondary-highlight-hover);
  --ore-tab-off-highlight-pressed: var(--ore-color-secondary-highlight);
  --ore-tab-off-shadow: var(--ore-color-secondary-shadow);
  --ore-tab-off-foreground: var(--ore-color-border);
  --ore-tab-on-background: var(--ore-color-primary-background);
  --ore-tab-on-highlight: color-mix(
    in srgb,
    var(--ore-color-primary-background),
    var(--ore-color-white) 10%
  );
  --ore-tab-on-foreground: var(--ore-color-white);
}

:where(.ore-tab-button:focus-visible) {
  z-index: 1;
}

:where(
  [role="tablist"]:not([aria-orientation="vertical"])
    > .ore-tab-button
    + .ore-tab-button
) {
  margin-inline-start: calc(var(--ore-button-unit) * -1);
}

:where(.ore-tab-button[aria-selected="true"])::before {
  box-shadow: none;
}

:where(.ore-tab-button[aria-selected="true"]):focus-visible::before {
  position: absolute;
  top: calc(var(--ore-button-unit) * 2);
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow:
    inset 0 0 0 var(--ore-button-unit) var(--ore-color-focus-ring),
    inset 0 0 0 calc(var(--ore-button-unit) * 2) var(--ore-button-border);
  content: "";
  pointer-events: none;
}

:where(.ore-tab-button[aria-selected="true"])::after {
  position: absolute;
  bottom: var(--ore-button-unit);
  left: 50%;
  width: calc(var(--ore-button-unit) * 22);
  height: var(--ore-button-unit);
  background: var(--ore-tab-indicator);
  content: "";
  transform: translateX(-50%);
}

:where(
  .ore-tab-button[aria-selected="true"]:active:not([disabled]),
  .ore-tab-button[aria-selected="true"][data-pressed]:not([disabled])
) {
  --ore-button-face-offset: 0px;

  padding-top: calc(var(--ore-button-unit) * 2);
  clip-path: none;
}

:where(
  .ore-tab-button:not([aria-selected="true"]):active:not([disabled]),
  .ore-tab-button:not([aria-selected="true"])[data-pressed]:not([disabled])
) {
  --ore-button-shadow: transparent;
}

:where(.ore-tab-button[disabled]) {
  --ore-button-background: var(--ore-tab-off-background);
  --ore-button-highlight: var(--ore-tab-off-highlight);
  --ore-button-border: var(--ore-color-border);
  --ore-button-shadow: var(--ore-tab-off-shadow);

  color: var(--ore-tab-off-foreground);
}

:where(.ore-tab-button[aria-selected="true"][disabled]) {
  --ore-button-background: var(--ore-tab-on-background);
  --ore-button-highlight: var(--ore-tab-on-highlight);
  --ore-button-border: var(--ore-color-border);
  --ore-button-shadow: transparent;

  color: var(--ore-tab-on-foreground);
}

:where(.ore-table) {
  --ore-table-unit: var(--ore-size-unit);
  --ore-table-border: var(--ore-color-border);
  --ore-table-header-background: var(--ore-color-neutral-background);
  --ore-table-row-background: var(--ore-color-neutral-surface-raised);
  --ore-table-row-background-alternate: var(--ore-color-neutral-surface-sunken);
  --ore-table-foreground: var(--ore-color-foreground);
  --ore-table-sort-inactive: var(--ore-color-disabled-border);

  display: block;
  max-width: 100%;
  overflow-x: auto;
  color: var(--ore-table-foreground);
  font-family: var(--ore-font-body);
}

:where(.ore-table > table) {
  width: calc(var(--ore-table-unit) * 256);
  border-collapse: collapse;
  table-layout: fixed;
}

:where(.ore-table .ore-table-row-header-column) {
  width: 23.4375%;
}

:where(.ore-table .ore-table-data-column) {
  width: 19.140625%;
}

:where(.ore-table th, .ore-table td) {
  box-sizing: border-box;
  height: calc(var(--ore-table-unit) * 21);
  padding: 0 calc(var(--ore-table-unit) * 4);
  overflow: hidden;
  border: var(--ore-table-unit) solid var(--ore-table-border);
  background: var(--ore-table-row-background);
  font-size: calc(var(--ore-table-unit) * 7);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:where(.ore-table thead th, .ore-table tbody th) {
  background: var(--ore-table-header-background);
}

:where(.ore-table .ore-table-corner:empty) {
  border: 0;
  background: transparent;
}

:where(.ore-table th[aria-sort]) {
  padding: 0;
}

:where(.ore-table[data-variant="striped"] tbody tr:nth-child(even) td) {
  background: var(--ore-table-row-background-alternate);
}

:where(.ore-table .ore-table-sort) {
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0 calc(var(--ore-table-unit) * 6);
  border: 0;
  outline: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

:where(.ore-table .ore-table-sort)::before,
:where(.ore-table .ore-table-sort)::after {
  content: none;
}

:where(.ore-table .ore-table-sort-indicator) {
  position: absolute;
  top: 50%;
  right: calc(var(--ore-table-unit) * 2);
  width: calc(var(--ore-table-unit) * 4);
  height: calc(var(--ore-table-unit) * 7);
  transform: translateY(-50%);
}

:where(.ore-table .ore-table-sort-indicator)::before,
:where(.ore-table .ore-table-sort-indicator)::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(var(--ore-table-unit) * 4);
  background: currentColor;
  content: "";
  mask: center / contain no-repeat;
}

:where(.ore-table .ore-table-sort-indicator)::before {
  top: 0;
  color: var(--ore-table-sort-inactive);
  mask-image: url("./icons/arrow-up.svg");
}

:where(.ore-table .ore-table-sort-indicator)::after {
  bottom: 0;
  color: var(--ore-table-sort-inactive);
  mask-image: url("./icons/arrow-down.svg");
}

:where(.ore-table th[aria-sort="ascending"] .ore-table-sort-indicator)::before,
:where(.ore-table th[aria-sort="descending"] .ore-table-sort-indicator)::after {
  color: var(--ore-table-foreground);
}

:where(.ore-table .ore-table-sort:focus-visible) {
  outline: var(--ore-table-unit) solid var(--ore-color-focus-ring);
  outline-offset: calc(var(--ore-table-unit) * -1);
}

:where(span.ore-tag) {
  --ore-tag-unit: var(--ore-size-unit);
  --ore-tag-background: var(--ore-color-neutral-surface-deep);
  --ore-tag-foreground: var(--ore-color-neutral-text);
  --ore-tag-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: calc(var(--ore-tag-unit) * 8.5);
  padding: 0 calc(var(--ore-tag-unit) * 2.5);
  color: var(--ore-tag-foreground);
  background: var(--ore-tag-background);
  box-shadow: 0 0 0 var(--ore-tag-unit) var(--ore-tag-border);
  font-family: var(--ore-font-body);
  font-size: calc(var(--ore-tag-unit) * 7);
  font-weight: 400;
  line-height: calc(var(--ore-tag-unit) * 8);
  white-space: nowrap;
}

:where(span.ore-tag[data-outlined]) {
  --ore-tag-border: var(--ore-color-border);
}

:where(span.ore-tag[data-variant="secondary"]) {
  --ore-tag-background: var(--ore-color-neutral-surface-raised);
}

:where(span.ore-tag[data-variant="primary"]) {
  --ore-tag-background: var(--ore-color-primary-tint-background);
  --ore-tag-foreground: var(--ore-color-primary-tint-foreground);
}

:where(span.ore-tag[data-variant="informative"]) {
  --ore-tag-background: var(--ore-color-informative-tint-background);
  --ore-tag-foreground: var(--ore-color-informative-tint-foreground);
}

:where(span.ore-tag[data-variant="notice"]) {
  --ore-tag-background: var(--ore-color-notice-tint-background);
  --ore-tag-foreground: var(--ore-color-notice-tint-foreground);
}

:where(span.ore-tag[data-variant="warning"]) {
  --ore-tag-background: var(--ore-color-destructive-tint-background);
  --ore-tag-foreground: var(--ore-color-destructive-tint-foreground);
}

:where(span.ore-tag[data-variant="realms-informative"]) {
  --ore-tag-background: var(--ore-color-realms-informative-tint-background);
  --ore-tag-foreground: var(--ore-color-neutral-border);
}

:where(.ore-textarea) {
  --ore-textarea-unit: var(--ore-size-unit);
  --ore-textarea-background: var(--ore-color-neutral-surface-raised);
  --ore-textarea-shadow: var(--ore-color-neutral-surface-sunken);
  --ore-textarea-border: var(--ore-color-border);
  --ore-textarea-foreground: var(--ore-color-foreground);
  --ore-textarea-input-foreground: var(--ore-color-foreground);
  --ore-textarea-description: var(--ore-color-disabled);
  --ore-textarea-error: var(--ore-color-destructive-highlight-hover);
  --ore-textarea-focus-ring: transparent;
  --ore-textarea-caret: var(--ore-color-primary-background);

  display: inline-grid;
  width: min(100%, calc(var(--ore-textarea-unit) * 122));
  color: var(--ore-textarea-foreground);
  font-family: var(--ore-font-body);
}

:where(.ore-textarea > .ore-textarea-label) {
  font-size: calc(var(--ore-textarea-unit) * 8);
  line-height: calc(var(--ore-textarea-unit) * 10);
  cursor: text;
}

:where(.ore-textarea > .ore-textarea-control) {
  display: grid;
  box-sizing: border-box;
  min-height: calc(var(--ore-textarea-unit) * 38);
  margin-top: var(--ore-textarea-unit);
  padding: calc(var(--ore-textarea-unit) * 3) calc(var(--ore-textarea-unit) * 1)
    calc(var(--ore-textarea-unit) * 1);
  overflow: hidden;
  background:
    linear-gradient(var(--ore-textarea-shadow), var(--ore-textarea-shadow))
      center var(--ore-textarea-unit) /
      calc(100% - var(--ore-textarea-unit) * 2)
      calc(var(--ore-textarea-unit) * 2) no-repeat,
    linear-gradient(
        var(--ore-textarea-background),
        var(--ore-textarea-background)
      )
      center calc(var(--ore-textarea-unit) * 3) /
      calc(100% - var(--ore-textarea-unit) * 2)
      calc(100% - var(--ore-textarea-unit) * 4) no-repeat,
    var(--ore-textarea-border);
  box-shadow: 0 0 0 var(--ore-textarea-unit) var(--ore-textarea-focus-ring);
}

:where(.ore-textarea .ore-textarea-input) {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  min-height: calc(var(--ore-textarea-unit) * 32);
  margin: 0;
  padding: calc(var(--ore-textarea-unit) * 2) calc(var(--ore-textarea-unit) * 3);
  border: 0;
  outline: 0;
  color: var(--ore-textarea-input-foreground);
  background: transparent;
  font: inherit;
  font-size: calc(var(--ore-textarea-unit) * 8);
  line-height: calc(var(--ore-textarea-unit) * 10);
  caret-color: var(--ore-textarea-caret);
  resize: both;
}

:where(.ore-textarea .ore-textarea-input::placeholder) {
  color: var(--ore-color-neutral-text-dim);
  opacity: 1;
}

:where(.ore-textarea > .ore-textarea-description) {
  margin-top: calc(var(--ore-textarea-unit) * 2);
  color: var(--ore-textarea-description);
  font-size: calc(var(--ore-textarea-unit) * 6);
  line-height: calc(var(--ore-textarea-unit) * 7);
}

:where(.ore-textarea > .ore-textarea-error) {
  margin-top: calc(var(--ore-textarea-unit) * 2);
  color: var(--ore-textarea-error);
  font-size: calc(var(--ore-textarea-unit) * 6);
  line-height: calc(var(--ore-textarea-unit) * 7);
}

:where(
  .ore-textarea:has(
      > .ore-textarea-control > .ore-textarea-input[aria-invalid="true"]
    )
    > .ore-textarea-control
) {
  --ore-textarea-border: var(--ore-color-destructive-highlight);
  --ore-textarea-shadow: var(--ore-color-destructive-shadow);
}

:where(.ore-textarea:has(.ore-textarea-input:focus-visible)) {
  --ore-textarea-focus-ring: var(--ore-color-focus-ring);
}

:where(
  .ore-textarea:has(> .ore-textarea-control > .ore-textarea-input:disabled)
) {
  --ore-textarea-background: var(--ore-color-disabled);
  --ore-textarea-shadow: var(--ore-color-disabled-shadow);
  --ore-textarea-border: var(--ore-color-disabled-border);
  --ore-textarea-foreground: var(--ore-color-disabled);
  --ore-textarea-input-foreground: var(--ore-color-disabled);
}

:where(
    .ore-textarea:has(> .ore-textarea-control > .ore-textarea-input:disabled)
  )
  > .ore-textarea-label {
  cursor: not-allowed;
}

:where(.ore-textfield) {
  --ore-textfield-unit: var(--ore-size-unit);
  --ore-textfield-background: var(--ore-color-neutral-surface-raised);
  --ore-textfield-shadow: var(--ore-color-neutral-surface-sunken);
  --ore-textfield-border: var(--ore-color-border);
  --ore-textfield-foreground: var(--ore-color-foreground);
  --ore-textfield-input-foreground: var(--ore-color-foreground);
  --ore-textfield-description: var(--ore-color-disabled);
  --ore-textfield-error: var(--ore-color-destructive-highlight-hover);
  --ore-textfield-focus-ring: transparent;
  --ore-textfield-caret: var(--ore-color-primary-background);

  display: inline-grid;
  width: var(
    --ore-textfield-width,
    min(100%, calc(var(--ore-textfield-unit) * 122))
  );
  color: var(--ore-textfield-foreground);
  font-family: var(--ore-font-body);
}

:where(.ore-textfield > .ore-textfield-label) {
  font-size: calc(var(--ore-textfield-unit) * 8);
  line-height: calc(var(--ore-textfield-unit) * 10);
  cursor: text;
}

:where(.ore-textfield > .ore-textfield-control) {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: calc(var(--ore-textfield-unit) * 22);
  margin-top: var(--ore-textfield-unit);
  padding: calc(var(--ore-textfield-unit) * 3)
    calc(var(--ore-textfield-unit) * 1) calc(var(--ore-textfield-unit) * 1);
  background:
    linear-gradient(var(--ore-textfield-shadow), var(--ore-textfield-shadow))
      center var(--ore-textfield-unit) /
      calc(100% - var(--ore-textfield-unit) * 2)
      calc(var(--ore-textfield-unit) * 2) no-repeat,
    linear-gradient(
        var(--ore-textfield-background),
        var(--ore-textfield-background)
      )
      center calc(var(--ore-textfield-unit) * 3) /
      calc(100% - var(--ore-textfield-unit) * 2)
      calc(100% - var(--ore-textfield-unit) * 4) no-repeat,
    var(--ore-textfield-border);
  box-shadow: 0 0 0 var(--ore-textfield-unit) var(--ore-textfield-focus-ring);
}

:where(.ore-textfield .ore-textfield-input) {
  box-sizing: border-box;
  min-width: 0;
  flex: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 calc(var(--ore-textfield-unit) * 3);
  border: 0;
  outline: 0;
  color: var(--ore-textfield-input-foreground);
  background: transparent;
  font: inherit;
  font-size: calc(var(--ore-textfield-unit) * 8);
  caret-color: var(--ore-textfield-caret);
}

:where(.ore-textfield .ore-textfield-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: calc(var(--ore-textfield-unit) * 8);
  height: calc(var(--ore-textfield-unit) * 8);
  margin-left: calc(var(--ore-textfield-unit) * 3);
  color: var(--ore-textfield-foreground);
  pointer-events: none;
}

:where(.ore-textfield .ore-textfield-input::placeholder) {
  color: var(--ore-color-neutral-text-dim);
  opacity: 1;
}

:where(.ore-textfield > .ore-textfield-description) {
  margin-top: calc(var(--ore-textfield-unit) * 2);
  color: var(--ore-textfield-description);
  font-size: calc(var(--ore-textfield-unit) * 6);
  line-height: calc(var(--ore-textfield-unit) * 7);
}

:where(.ore-textfield > .ore-textfield-error) {
  margin-top: calc(var(--ore-textfield-unit) * 2);
  color: var(--ore-textfield-error);
  font-size: calc(var(--ore-textfield-unit) * 6);
  line-height: calc(var(--ore-textfield-unit) * 7);
}

:where(
  .ore-textfield:has(
      > .ore-textfield-control > .ore-textfield-input[aria-invalid="true"]
    )
    > .ore-textfield-control
) {
  --ore-textfield-background: var(--ore-color-neutral-surface-raised);
  --ore-textfield-border: var(--ore-color-destructive-highlight);
  --ore-textfield-shadow: var(--ore-color-destructive-shadow);
}

:where(.ore-textfield:has(.ore-textfield-input:focus-visible)) {
  --ore-textfield-focus-ring: var(--ore-color-focus-ring);
}

:where(
  .ore-textfield:has(> .ore-textfield-control > .ore-textfield-input:disabled)
) {
  --ore-textfield-background: var(--ore-color-disabled);
  --ore-textfield-shadow: var(--ore-color-disabled-shadow);
  --ore-textfield-border: var(--ore-color-disabled-border);
  --ore-textfield-foreground: var(--ore-color-disabled-foreground);
  --ore-textfield-input-foreground: var(--ore-color-disabled-foreground);
}

:where(
    .ore-textfield:has(> .ore-textfield-control > .ore-textfield-input:disabled)
  )
  > .ore-textfield-label {
  cursor: not-allowed;
}

:where(.ore-toast) {
  --ore-toast-unit: var(--ore-size-unit);
  --ore-toast-inset: calc(var(--ore-toast-unit) * 16);
  --ore-toast-background: var(--ore-color-neutral-surface-deep);
  --ore-toast-foreground: var(--ore-color-neutral-text);
  --ore-toast-border: var(--ore-color-border);
  --ore-toast-shadow: var(--ore-color-black-opacity-30);

  position: fixed;
  inset: auto;
  box-sizing: border-box;
  max-width: min(calc(100vw - var(--ore-toast-inset) * 2), 32rem);
  min-height: calc(var(--ore-toast-unit) * 16);
  margin: 0;
  padding: calc(var(--ore-toast-unit) * 3) calc(var(--ore-toast-unit) * 5);
  overflow-wrap: anywhere;
  border: var(--ore-toast-unit) solid var(--ore-toast-border);
  color: var(--ore-toast-foreground);
  background: var(--ore-toast-background);
  box-shadow: var(--ore-toast-unit) var(--ore-toast-unit) 0
    var(--ore-toast-shadow);
  font-family: var(--ore-font-body);
  font-size: calc(var(--ore-toast-unit) * 8);
  font-weight: 400;
  line-height: calc(var(--ore-toast-unit) * 8);
  text-align: center;
}

.ore-toast:popover-open {
  inset: auto;
  margin: 0;
}

:where(.ore-toast:not(:popover-open)) {
  display: none;
}

.ore-toast:popover-open[data-position="top-start"] {
  top: var(--ore-toast-inset);
  left: var(--ore-toast-inset);
}

.ore-toast:popover-open[data-position="top-center"] {
  top: var(--ore-toast-inset);
  left: 50%;
  transform: translateX(-50%);
}

.ore-toast:popover-open[data-position="top-end"] {
  top: var(--ore-toast-inset);
  right: var(--ore-toast-inset);
}

.ore-toast:popover-open[data-position="bottom-start"] {
  bottom: var(--ore-toast-inset);
  left: var(--ore-toast-inset);
}

.ore-toast:popover-open:not([data-position]),
.ore-toast:popover-open[data-position="bottom-center"] {
  bottom: var(--ore-toast-inset);
  left: 50%;
  transform: translateX(-50%);
}

.ore-toast:popover-open[data-position="bottom-end"] {
  right: var(--ore-toast-inset);
  bottom: var(--ore-toast-inset);
  left: auto;
  transform: none;
}

:where(.ore-toast[data-variant="secondary"]) {
  --ore-toast-background: var(--ore-color-neutral-surface-raised);
}

:where(.ore-toast[data-variant="primary"]) {
  --ore-toast-background: var(--ore-color-primary-tint-background);
  --ore-toast-foreground: var(--ore-color-primary-tint-foreground);
}

:where(.ore-toast[data-variant="informative"]) {
  --ore-toast-background: var(--ore-color-informative-tint-background);
  --ore-toast-foreground: var(--ore-color-informative-tint-foreground);
}

:where(.ore-toast[data-variant="notice"]) {
  --ore-toast-background: var(--ore-color-notice-tint-background);
  --ore-toast-foreground: var(--ore-color-notice-tint-foreground);
}

:where(.ore-toast[data-variant="warning"]) {
  --ore-toast-background: var(--ore-color-destructive-tint-background);
  --ore-toast-foreground: var(--ore-color-destructive-tint-foreground);
}

:where(.ore-toast[data-variant="realms-informative"]) {
  --ore-toast-background: var(--ore-color-realms-informative-tint-background);
  --ore-toast-foreground: var(--ore-color-neutral-border);
}

@media (prefers-reduced-motion: no-preference) {
  :where(.ore-toast:popover-open) {
    animation: ore-toast-show var(--ore-motion-fast) steps(2, jump-none);
  }
}

@keyframes ore-toast-show {
  from {
    opacity: 0;
  }
}

:where(.ore-toggles) {
  display: flex;
  align-items: flex-end;
}

:where(.ore-tooltip) {
  --ore-tooltip-unit: var(--ore-size-unit);
  --_ore-tooltip-pixel-size: var(--ore-size-unit);
  --ore-tooltip-corner-size: var(--_ore-tooltip-pixel-size);
  --ore-tooltip-background: var(--ore-color-informative-background);
  --ore-tooltip-border: var(--ore-color-border);
  --ore-tooltip-foreground: var(--ore-color-foreground);

  display: inline-block;
}

:where(.ore-tooltip > .ore-tooltip-content) {
  position: fixed;
  isolation: isolate;
  inset: auto;
  box-sizing: border-box;
  min-width: calc(var(--ore-tooltip-unit) * 76);
  max-width: min(calc(var(--ore-tooltip-unit) * 152), calc(100vw - 2rem));
  min-height: calc(var(--ore-tooltip-unit) * 14);
  margin: 0;
  padding: calc(var(--ore-tooltip-unit) * 3) calc(var(--ore-tooltip-unit) * 6);
  overflow: visible;
  border: 0;
  color: var(--ore-tooltip-foreground);
  background: transparent;
  font-family: var(--ore-font-body);
  font-size: calc(var(--ore-tooltip-unit) * 7);
  line-height: 1;
  pointer-events: none;
}

:where(.ore-tooltip > .ore-tooltip-content)::before,
:where(.ore-tooltip > .ore-tooltip-content)::after {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: var(--ore-tooltip-border);
  clip-path: polygon(
    var(--ore-tooltip-corner-size) 0,
    calc(100% - var(--ore-tooltip-corner-size)) 0,
    calc(100% - var(--ore-tooltip-corner-size)) var(--ore-tooltip-corner-size),
    100% var(--ore-tooltip-corner-size),
    100% calc(100% - var(--ore-tooltip-corner-size)),
    calc(100% - var(--ore-tooltip-corner-size))
      calc(100% - var(--ore-tooltip-corner-size)),
    calc(100% - var(--ore-tooltip-corner-size)) 100%,
    var(--ore-tooltip-corner-size) 100%,
    var(--ore-tooltip-corner-size) calc(100% - var(--ore-tooltip-corner-size)),
    0 calc(100% - var(--ore-tooltip-corner-size)),
    0 var(--ore-tooltip-corner-size),
    var(--ore-tooltip-corner-size) var(--ore-tooltip-corner-size)
  );
  content: "";
}

:where(.ore-tooltip > .ore-tooltip-content)::after {
  z-index: -1;
  inset: var(--ore-tooltip-unit);
  background: var(--ore-tooltip-background);
}

:where(.ore-tooltip > .ore-tooltip-content:not(:popover-open)) {
  display: none;
}

:where(.ore-tooltip .ore-tooltip-arrow) {
  position: absolute;
  z-index: 0;
  width: calc(var(--_ore-tooltip-pixel-size) * 3 + var(--ore-tooltip-unit) * 2);
  height: calc(var(--_ore-tooltip-pixel-size) * 3 + var(--ore-tooltip-unit));
  color: var(--ore-tooltip-border);
}

:where(.ore-tooltip .ore-tooltip-arrow)::before,
:where(.ore-tooltip .ore-tooltip-arrow)::after {
  position: absolute;
  background: currentColor;
  content: "";
}

:where(.ore-tooltip .ore-tooltip-arrow)::before {
  z-index: 0;
  top: calc(var(--ore-tooltip-unit) * -1);
  left: 0;
  width: 100%;
  height: calc(
    var(--_ore-tooltip-pixel-size) * 3 + var(--ore-tooltip-unit) * 2
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    calc(var(--_ore-tooltip-pixel-size) * 2) 100%,
    calc(var(--_ore-tooltip-pixel-size) * 2)
      calc(var(--_ore-tooltip-pixel-size) * 2 + var(--ore-tooltip-unit) * 2),
    var(--_ore-tooltip-pixel-size)
      calc(var(--_ore-tooltip-pixel-size) * 2 + var(--ore-tooltip-unit) * 2),
    var(--_ore-tooltip-pixel-size)
      calc(var(--_ore-tooltip-pixel-size) + var(--ore-tooltip-unit) * 2),
    0 calc(var(--_ore-tooltip-pixel-size) + var(--ore-tooltip-unit) * 2)
  );
}

:where(.ore-tooltip .ore-tooltip-arrow)::after {
  z-index: 1;
  top: calc(var(--ore-tooltip-unit) * -2);
  left: var(--ore-tooltip-unit);
  width: calc(var(--_ore-tooltip-pixel-size) * 3);
  height: calc(
    var(--_ore-tooltip-pixel-size) * 3 + var(--ore-tooltip-unit) * 2
  );
  background: var(--ore-tooltip-background);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    calc(var(--_ore-tooltip-pixel-size) * 2) 100%,
    calc(var(--_ore-tooltip-pixel-size) * 2)
      calc(var(--_ore-tooltip-pixel-size) * 2 + var(--ore-tooltip-unit) * 2),
    var(--_ore-tooltip-pixel-size)
      calc(var(--_ore-tooltip-pixel-size) * 2 + var(--ore-tooltip-unit) * 2),
    var(--_ore-tooltip-pixel-size)
      calc(var(--_ore-tooltip-pixel-size) + var(--ore-tooltip-unit) * 2),
    0 calc(var(--_ore-tooltip-pixel-size) + var(--ore-tooltip-unit) * 2)
  );
}

:where(
  .ore-tooltip:not([data-side]) .ore-tooltip-arrow,
  .ore-tooltip[data-side="top"] .ore-tooltip-arrow
) {
  top: 100%;
  right: calc(var(--_ore-tooltip-pixel-size) * 2);
}

:where(.ore-tooltip[data-side="bottom"] .ore-tooltip-arrow) {
  right: calc(var(--_ore-tooltip-pixel-size) * 2);
  bottom: 100%;
  transform: rotate(180deg) scaleX(-1);
}

:where(.ore-tooltip[data-side="left"] .ore-tooltip-arrow) {
  top: var(--ore-tooltip-arrow-y, 50%);
  left: calc(100% - var(--_ore-tooltip-pixel-size) / 2);
  transform: translateY(-50%) rotate(-90deg);
}

:where(.ore-tooltip[data-side="right"] .ore-tooltip-arrow) {
  top: var(--ore-tooltip-arrow-y, 50%);
  right: calc(100% - var(--_ore-tooltip-pixel-size) / 2);
  transform: translateY(-50%) rotate(90deg);
}

@media (prefers-reduced-motion: no-preference) {
  :where(.ore-tooltip > .ore-tooltip-content:popover-open) {
    animation: ore-tooltip-show var(--ore-motion-fast) steps(2, jump-none);
  }
}

@keyframes ore-tooltip-show {
  from {
    opacity: 0;
  }
}

}