corex

@utility ui-root {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--spacing-space);

  &[data-orientation="vertical"] {
    flex-direction: column;
  }

  &[data-orientation="horizontal"] {
    flex-flow: row wrap;
  }
}

@utility ui-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  width: auto;
  min-height: var(--spacing-size);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  font-weight: var(--font-weight-normal);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  padding-inline: var(--spacing-space);
  min-height: var(--spacing-size);
  gap: var(--spacing-space);
  
  color: var(--color-ink);
  background-color: var(--color-ui);
  appearance: none;
  transition: background-color 120ms ease, color 120ms ease;

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

  &:active {
    background-color: var(--color-ui-active);
  }

  &:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-ink);
  }

  &:disabled,
  &[data-disabled],
  &[disabled] {
    color: var(--color-ink-muted);
    background-color: var(--color-ui-muted);
    cursor: not-allowed;
  }

  &[data-invalid] {
    border-color: var(--color-alert);
    box-shadow: none;
  }

  &[data-invalid]:focus-visible {
    box-shadow: none;
  }

  &[data-state="open"],
  &[data-state="checked"],
  &[data-state="on"] {
    background-color: var(--color-selected);
    color: var(--color-selected-ink);

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

    &:active {
      background-color: var(--color-selected-active);
    }

    &:focus-visible {
      box-shadow: inset 0 0 0 2px var(--color-selected-ink);
    }

    &:disabled,
    &[data-disabled],
    &[disabled] {
      background-color: var(--color-selected-muted);
      cursor: not-allowed;
    }
  }

  & .icon,
  & [class^="hero-"] {
    @apply ui-icon;
  }

  & [data-part="item-text"] {
    display: flex;
    gap: var(--spacing-space);
    width: 100%;
    text-align: start;
    align-items: center;
  }
}

@utility ui-trigger--* {
  font-size: --value(--text-*, [length]);
  line-height: --value(--text-*--line-height, [length]);
  padding-inline: --value(--spacing-space-*, [length]);
  gap: --value(--spacing-space-*, [length]);
  min-height: --value(--spacing-size-*, [length]);
  background-color: --value(--color-*, [color]);
  color: --value(--color-*-ink, [color]);

  &:hover {
    background-color: --value(--color-*-hover, [color]);
  }

  &:active {
    background-color: --value(--color-*-active, [color]);
  }

  &:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px --value(--color-*-ink, [color]);
  }

  &:disabled,
  &[data-disabled],
  &[disabled] {
    background-color: --value(--color-*-muted, [color]);
    cursor: not-allowed;
  }

  &[data-state="open"],
  &[data-state="checked"],
  &[data-state="on"] {
    background-color: --value(--color-*, [color]);
    color: --value(--color-*-ink, [color]);

    &:hover {
      background-color: --value(--color-*-hover, [color]);
    }

    &:active {
      background-color: --value(--color-*-active, [color]);
    }

    &:focus-visible {
      box-shadow: inset 0 0 0 2px --value(--color-*-ink, [color]);
      outline: none;
    }

    &:disabled,
    &[data-disabled],
    &[disabled] {
      background-color: --value(--color-*-muted, [color]);
      cursor: not-allowed;
    }
  }
}

@utility ui-trigger--square {
  aspect-ratio: 1 / 1;
  padding: 0;
  justify-content: center;
  width: auto;
}

@utility ui-trigger--circle {
  aspect-ratio: 1 / 1;
  padding: 0;
  justify-content: center;
  width: auto;
  border-radius: var(--radius-full) !important;
}

@utility ui-trigger--ghost {
  border-color: transparent !important;
  background-color: transparent !important;

  &:hover {
    background-color: var(--color-ui-hover) !important;
  }

  &:active {
    background-color: var(--color-ui-active) !important;
  }
}


@utility ui-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1em !important;
  width: 1em !important;
  color: currentcolor;
  flex-shrink: 0;

  [dir="rtl"] & {
    transform: scaleX(-1);
  }
}

@utility ui-icon--* {
  font-size: --value(--text-*, [length]);
  line-height: --value(--text-*--line-height, [length]);
}


@utility ui-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--spacing-space);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-root);
  color: var(--color-ink);
  box-shadow: var(--shadow-md);
}


@utility ui-label {
  display: flex;
  align-items: center;
  justify-content: start;
  text-align: start;
  width: auto;
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink);
}


@utility ui-input {
  display: flex;
  align-items: center;
  justify-content: start;
  text-align: start;
  width: 100%;
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  font-weight: var(--font-weight-normal);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  padding-inline: var(--spacing-space);
  gap: var(--spacing-space);
  min-height: var(--spacing-size);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-ink);
  background-color: var(--color-ui);
  transition: background-color 120ms ease, box-shadow 120ms ease;

  &::placeholder {
    color: var(--color-ink-muted);
  }

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

  &:focus,
  &:focus-within {
    background-color: var(--color-root);
    outline: none;
  }

  &:disabled,
  &[data-disabled],
  &[disabled] {
    color: var(--color-ink-muted);
    background-color: var(--color-ui-muted);
    opacity: 0.7;
    cursor: not-allowed;
  }

  &[data-invalid] {
    border-color: var(--color-alert);
    box-shadow: none;
  }

  &[data-invalid]:focus,
  &[data-invalid]:focus-within,
  &[data-invalid]:focus-visible {
    box-shadow: none;
    outline: none;
  }

  & .icon,
  & [class^="hero-"],
  & svg,
  & img {
    @apply ui-icon;
  }
}


@utility ui-item {
  width: 100%;
  display: inline-flex;
  align-items: center;
  text-align: start;
  cursor: pointer;
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  font-weight: var(--font-weight-normal);
  min-height: var(--spacing-size);
  padding-inline: var(--spacing-space);
  gap: var(--spacing-space);
  background-color: var(--color-ui);
  color: var(--color-ink);
  border-radius: var(--radius-none);
  
  outline: none;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;

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

  &:active {
    background-color: var(--color-ui-active);
    box-shadow: none;
  }

  &:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-ink);
    background-color: var(--color-ui-hover);
  }

  @media (hover: hover) {
    &[data-highlighted]:not(:hover) {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--color-ink);
      background-color: var(--color-ui-hover);
    }

    &[data-highlighted]:active {
      background-color: var(--color-ui-active);
      box-shadow: none;
    }
  }

  @media (hover: none) {
    &[data-highlighted] {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--color-ink);
      background-color: var(--color-ui-hover);
    }
  }

  &:disabled,
  &[data-disabled],
  &[disabled] {
    color: var(--color-ink-muted);
    background-color: var(--color-ui-muted);
    cursor: not-allowed;
    box-shadow: none;
  }

  &[data-selected],
  &[data-state="checked"],
  &[data-state="on"],
  &[data-in-range],
  &[data-checked],
  &[data-indeterminate] {
    background-color: var(--color-selected);
    color: var(--color-selected-ink);

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

    &:active {
      background-color: var(--color-selected-active);
      box-shadow: none;
    }

    &:focus-visible {
      background-color: var(--color-selected-hover);
      box-shadow: inset 0 0 0 2px var(--color-selected-ink);
      outline: none;
    }

    @media (hover: hover) {
      &[data-highlighted]:not(:hover) {
        background-color: var(--color-selected-hover);
        box-shadow: inset 0 0 0 2px var(--color-selected-ink);
      }

      &[data-highlighted]:active {
        background-color: var(--color-selected-active);
        box-shadow: none;
      }
    }

    @media (hover: none) {
      &[data-highlighted] {
        background-color: var(--color-selected-hover);
        box-shadow: inset 0 0 0 2px var(--color-selected-ink);
      }
    }
  }

  &[data-disabled][data-selected],
  &[data-disabled][data-state="checked"],
  &[data-disabled][data-state="on"],
  &[data-disabled][data-in-range],
  &[data-disabled][data-checked],
  &[data-disabled][data-indeterminate] {
    background-color: var(--color-selected-muted);
    color: var(--color-selected-ink);
  }

  & [data-part="branch-indicator"],
  & [data-part="item-indicator"] {
    transition: transform 0.2s ease;
  }

  & [data-part="branch-indicator"][data-state="open"],
  & [data-part="item-indicator"][data-state="open"] {
    transform: rotate(90deg) !important;
  }

  & [data-part="branch-indicator"][dir="rtl"][data-state="open"],
  & [data-part="item-indicator"][dir="rtl"][data-state="open"],
  &[dir="rtl"] [data-part="branch-indicator"][data-state="open"],
  &[dir="rtl"] [data-part="item-indicator"][data-state="open"],
  [dir="rtl"] & [data-part="branch-indicator"][data-state="open"],
  [dir="rtl"] & [data-part="item-indicator"][data-state="open"] {
    transform: rotate(-90deg) !important;
  }

  & svg,
  & .icon,
  & img,
  & [class^="hero-"],
  & [data-part="item-indicator"] svg,
  & [data-part="branch-indicator"] svg {
    @apply ui-icon;
  }

  & [data-part="item-text"],
  & [data-part="branch-text"] {
    display: flex;
    gap: var(--spacing-space);
    width: 100%;
    text-align: start;
    align-items: center;
    flex: 1;
  }
}

@utility ui-item--* {
  font-size: --value(--text-*, [length]);
  line-height: --value(--text-*--line-height, [length]);
  padding-inline: --value(--spacing-space-*, [length]);
  gap: --value(--spacing-space-*, [length]);
  min-height: --value(--spacing-size-*, [length]);
  background-color: --value(--color-*, [color]);
  color: --value(--color-*-ink, [color]);

  &:hover {
    background-color: --value(--color-*-hover, [color]);
  }

  &:active {
    background-color: --value(--color-*-active, [color]);
  }

  &:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px --value(--color-*-ink, [color]);
  }

  &:disabled,
  &[data-disabled],
  &[disabled] {
    background-color: --value(--color-*-muted, [color]);
    color: var(--color-ink-muted);
    cursor: not-allowed;
  }

  &[data-selected],
  &[data-state="checked"],
  &[data-state="on"],
  &[data-in-range],
  &[data-checked],
  &[data-indeterminate] {
    background-color: --value(--color-*, [color]);
    color: --value(--color-*-ink, [color]);

    &:hover {
      background-color: --value(--color-*-hover, [color]);
    }

    &:active {
      background-color: --value(--color-*-active, [color]);
    }

    &:focus-visible {
      box-shadow: inset 0 0 0 2px --value(--color-*-ink, [color]);
      outline: none;
    }

    &:disabled,
    &[data-disabled],
    &[disabled] {
      background-color: --value(--color-*-muted, [color]);
      cursor: not-allowed;
    }
  }
}


@utility ui-link {
  display: inline-flex;
  justify-content: start;
  align-items: center;
  cursor: pointer;
  position: relative;
  color: var(--color-link);
  height: auto;
  font-size: inherit;
  line-height: inherit;
  gap: var(--spacing-space);
  padding-inline: var(--spacing-space);
  border-radius: var(--radius-md);
  text-decoration-line: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: from-font;
  max-width: fit-content;
  min-width: 0;

  &:hover {
    text-decoration-thickness: 2px;
  }

  &:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  &:disabled,
  &[data-disabled] {
    color: var(--color-ink-muted);
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
  }

  &[aria-current="page"],
  &[aria-current="location"] {
    font-weight: var(--font-weight-semibold);
    pointer-events: none;
  }

  & .icon,
  & [class^="hero-"] {
    @apply ui-icon;
  }
}

@utility ui-link--* {
  font-size: --value(--text-*, [length]);
  line-height: --value(--text-*--line-height, [length]);
  color: --value(--color-ink-*, [color]);
  gap: calc(--value(--spacing-*, [length]) * 0.5);
}


@utility ui-error {
  display: inline-flex;
  align-items: center;
  justify-content: start;
  text-align: start;
  width: auto;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-normal);
  gap: --spacing(1);
  color: var(--color-ink-alert);
  padding-block: var(--spacing-space);
}


@utility ui-readonly {
  &::after {
    content: "";
    position: absolute;
    inset-block-end: --spacing(1);
    inset-inline-end: --spacing(1);
    width: 1em;
    height: 1em;
    background-color: var(--color-ink-muted);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1ZM8.5 5.5V9H14V5.5a3.5 3.5 0 1 0-7 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
  }
}

@utility ui-loading {
  pointer-events: none !important;
  cursor: wait;
  user-select: none;
}