@import './_base.css';
@import './_sizes.css';

@layer base {
  .dbv-kit-combobox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    cursor: pointer;
    text-align: left;
    width: 100%;
    height: var(--dbv-kit-combobox-height);
    padding-inline: var(--dbv-kit-combobox-padding-inline);
    background-color: var(--dbv-kit-combobox-background);
    color: var(--dbv-kit-combobox-foreground);
    border-color: var(--dbv-kit-combobox-border-color);
    border-radius: var(--dbv-kit-combobox-border-radius);
    border-width: var(--dbv-kit-combobox-border-width);
    border-style: var(--dbv-kit-combobox-border-style);
    font-weight: var(--dbv-kit-combobox-font-weight);
    font-size: var(--dbv-kit-combobox-font-size);

    &:not(:disabled):hover {
      border-color: var(--dbv-kit-combobox-hover-border-color);
    }

    &[aria-disabled='true'] {
      opacity: var(--dbv-kit-control-disabled-opacity);
    }
    &[data-focus-visible],
    &:focus-visible {
      outline-offset: var(--dbv-kit-control-outline-offset);
      outline: var(--dbv-kit-control-outline-width) solid var(--dbv-kit-control-outline-color);
    }
  }

  .dbv-kit-combobox__popover {
    z-index: 1000;
    min-width: 100%;
    max-height: var(--dbv-kit-combobox-popover-height);
    overflow-y: auto;
    background-color: var(--dbv-kit-combobox-popover-background);
    color: var(--dbv-kit-combobox-popover-foreground);
    border-color: var(--dbv-kit-combobox-border-color);
    border-radius: var(--dbv-kit-combobox-border-radius);
    border-width: var(--dbv-kit-combobox-border-width);
    border-style: var(--dbv-kit-combobox-border-style);
    box-shadow: var(--dbv-kit-combobox-popover-shadow);
    outline: 0;

    @media (prefers-reduced-motion: no-preference) {
      opacity: 0;
      transform-origin: top;
      scale: 0.95;
      translate: 0 -0.5rem;
      transition-property: opacity, scale, translate;
      transition-timing-function: var(--tw-ease-in-out);
      transition-duration: 150ms;

      &[data-enter] {
        opacity: 1;
        scale: 1;
        translate: 0;
      }
    }
  }

  .dbv-kit-combobox__item {
    display: block;
    width: 100%;
    padding-inline: var(--dbv-kit-combobox-item-padding-inline);
    padding-block: var(--dbv-kit-combobox-item-padding-block);
    text-align: left;
    cursor: pointer;
    border: none;
    background: none;

    &[aria-disabled='true'] {
      opacity: var(--dbv-kit-control-disabled-opacity);
      user-select: none;
    }

    &[aria-selected='true'] {
      background-color: var(--dbv-kit-combobox-item-selected-background);
    }

    &:hover,
    &[data-focus-visible],
    &[data-active-item] {
      color: var(--dbv-kit-combobox-item-hover-foreground);
      background-color: var(--dbv-kit-combobox-item-hover-background);
    }
  }

  .dbv-kit-combobox__empty {
    gap: 0.5rem;
    padding: 0.5rem;
  }

  /* ---------------------------- */
  /* Sizes */

  .dbv-kit-combobox--small {
    --dbv-kit-combobox-height: var(--dbv-kit-combobox-small-height);
    --dbv-kit-combobox-padding: var(--dbv-kit-combobox-small-padding);
    --dbv-kit-combobox-font-size: var(--dbv-kit-combobox-small-font-size);
  }

  .dbv-kit-combobox--medium {
    --dbv-kit-combobox-height: var(--dbv-kit-combobox-medium-height);
    --dbv-kit-combobox-padding: var(--dbv-kit-combobox-medium-padding);
    --dbv-kit-combobox-font-size: var(--dbv-kit-combobox-medium-font-size);
  }

  .dbv-kit-combobox--large {
    --dbv-kit-combobox-height: var(--dbv-kit-combobox-large-height);
    --dbv-kit-combobox-padding: var(--dbv-kit-combobox-large-padding);
    --dbv-kit-combobox-font-size: var(--dbv-kit-combobox-large-font-size);
  }

  .dbv-kit-combobox--xlarge {
    --dbv-kit-combobox-height: var(--dbv-kit-combobox-xlarge-height);
    --dbv-kit-combobox-padding: var(--dbv-kit-combobox-xlarge-padding);
    --dbv-kit-combobox-font-size: var(--dbv-kit-combobox-xlarge-font-size);
  }
}
