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

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

    max-width: var(--container-mini);
    gap: var(--spacing-ui-gap);
    width: auto;
  }

  .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-ui-padding);
    padding-block: var(--spacing-mini-padding-sm);
  }

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

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

    max-width: 100%;
    width: 100%;
    padding-inline: var(--spacing-ui-padding);
    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="item-group-content"] {
    min-height: fit-content;
    display: flex;
    flex-direction: column;
  }

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

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

    align-items: flex-start;
    min-height: fit-content;
  }

  .combobox [data-scope="combobox"][data-part="item"] [data-part="item-text"] {
    min-height: fit-content;
  }

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

@utility combobox--* {
  [data-scope="combobox"][data-part="root"] {
    max-width: --value(--container-mini-*, [length]);
    gap: --value(--spacing-mini-gap-*, [length]);
  }

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

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

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

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

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

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

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

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

  [data-scope="combobox"][data-part="item"][data-highlighted]:not(:hover) {
    outline: 2px solid --value(--color-ui-* --text, [color]);
    background-color: --value(--color-ui-* -hover, [color]);
    color: --value(--color-ui-* --text, [color]);
  }

  [data-scope="combobox"][data-part="item"][data-selected][data-highlighted],
  [data-scope="combobox"][data-part="item"][data-state="checked"][data-highlighted] {
    outline: 2px solid var(--color-ui-accent--text);
    background-color: --value(--color-ui-* -hover, [color]);
    color: --value(--color-ui-* --text, [color]);
  }

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