corex

@import "../main.css";
@import "./scrollbar.css";

@layer components {
  .combobox {
    width: 100%;
    max-width: var(--container-3xs);
  }

  .combobox[data-orientation="horizontal"] {
    max-width: var(--container-md);
  }

  .combobox[data-loading] [data-scope="combobox"][data-part="root"] {
    @apply ui-loading;
  }

  .combobox [data-scope="combobox"][data-part="root"] {
    @apply ui-root;

    gap: var(--spacing-space);
    width: 100%;
    position: relative;
    padding-inline-end: var(--spacing-space);
  }

  .combobox [data-scope="combobox"][data-part="label"] {
    @apply ui-label;
  }

  .combobox [data-scope="combobox"][data-part="empty"] {
    @apply ui-label;

    list-style: none;
    padding-inline: var(--spacing-space);
    padding-block: var(--spacing-space);
  }

  .combobox [data-scope="combobox"][data-part="control"] {
    display: flex;
    position: relative;
  }

  .combobox [data-scope="combobox"][data-part="input"] {
    @apply ui-input;

    flex: 1;
    padding-inline: var(--spacing-space);
    border-inline-end: none;
    border-end-end-radius: 0;
    border-start-end-radius: 0;
  }

  .combobox [data-scope="combobox"][data-part="trigger"] {
    @apply ui-trigger ui-trigger--square;

    border-inline-start: none;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    flex-shrink: 0;
  }

  .combobox [data-scope="combobox"][data-part="clear-trigger"] {
    @apply ui-trigger ui-trigger--square;

    border-inline: none;
    border-radius: 0;
    flex-shrink: 0;
  }

  .combobox [data-scope="combobox"][data-part="positioner"] {
    position: relative;
    z-index: 50;
  }

  .combobox [data-scope="combobox"][data-part="content"] {
    @apply ui-content scrollbar scrollbar--sm;

    z-index: 50;
    max-height: calc(var(--spacing) * 96);
    overflow: auto;
    padding: 0;
    box-shadow: var(--shadow-ui);
  }

  .combobox [data-scope="combobox"][data-part="item-group"] {
    display: flex;
    flex-direction: column;
    min-height: fit-content;
  }

  .combobox [data-scope="combobox"][data-part="list"] {
    min-height: fit-content;
    display: flex;
    flex-direction: column;
  }

  .combobox [data-scope="combobox"][data-part="item-group-label"] {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    text-align: start;
    padding-inline: var(--spacing-space);
    padding-block: var(--spacing-space);
    background-color: var(--color-root);
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-border);
  }

  .combobox [data-scope="combobox"][data-part="item"] {
    @apply ui-item;
  }

  .combobox [data-scope="combobox"][data-part="error"] {
    @apply ui-error;
  }

  .combobox [data-scope="combobox"][data-part="root"][data-read-only],
  .combobox [data-scope="combobox"][data-part="root"][data-readonly] {
    @apply ui-readonly;
  }
}

@utility combobox--* {

  [data-scope="combobox"][data-part="root"] {
    gap: --value(--spacing-space-*, [length]);
  }

  [data-scope="combobox"][data-part="label"] {
    font-size: --value(--text-*, [length]);
    line-height: --value(--text-*--line-height, [length]);
  }

  [data-scope="combobox"][data-part="input"] {
    font-size: --value(--text-*, [length]);
    line-height: --value(--text-*--line-height, [length]);
    
    color: --value(--color-ink, [color]);
    border-color: --value(--color-border, [color]);

    ::placeholder {
      color: --value(--color-ink, [color]);
    }
  }

  [data-scope="combobox"][data-part="trigger"],
  [data-scope="combobox"][data-part="clear-trigger"] {
    color: --value(--color-ink, [color]);
    font-size: --value(--text-*, [length]);
    line-height: --value(--text-*--line-height, [length]);
    
    padding-inline: --value(--spacing-space-*, [length]);
    gap: --value(--spacing-space-*, [length]);
  }

  [data-scope="combobox"][data-part="item"] {
    font-size: --value(--text-*, [length]);
    line-height: --value(--text-*--line-height, [length]);
    
  }

  [data-scope="combobox"][data-part="item"][data-selected],
  [data-scope="combobox"][data-part="item"][data-state="checked"] {
    background-color: --value(--color-*, [color]);
    color: --value(--color-*-ink, [color]);
  }

  [data-scope="combobox"][data-part="item"][data-selected]:hover,
  [data-scope="combobox"][data-part="item"][data-state="checked"]:hover {
    background-color: --value(--color-*-hover, [color]);
    color: --value(--color-*-ink, [color]);
  }

  [data-scope="combobox"][data-part="item"][data-selected]:active,
  [data-scope="combobox"][data-part="item"][data-state="checked"]:active {
    background-color: --value(--color-*-active, [color]);
    color: --value(--color-*-ink, [color]);
  }

  [data-scope="combobox"][data-part="item"][data-selected]:focus-visible,
  [data-scope="combobox"][data-part="item"][data-state="checked"]:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px --value(--color-*-ink, [color]);
  }

  [data-scope="combobox"][data-part="item"][data-highlighted]:not(:hover) {
    outline: none;
    box-shadow: inset 0 0 0 2px --value(--color-ink, [color]);
    background-color: --value(--color-ui-hover, [color]);
    color: --value(--color-ink, [color]);
  }

  [data-scope="combobox"][data-part="item"][data-selected][data-highlighted],
  [data-scope="combobox"][data-part="item"][data-state="checked"][data-highlighted] {
    outline: none;
    box-shadow: inset 0 0 0 2px --value(--color-*-ink, [color]);
    background-color: --value(--color-*-hover, [color]);
    color: --value(--color-*-ink, [color]);
  }

  [data-scope="combobox"][data-part="trigger"] {
    font-size: --value(--text-*, [length]);
    line-height: --value(--text-*--line-height, [length]);
  }
}