@use 'variables' as *;
@use '@xui/theme-core' as core;

@mixin theme() {
  .x-select {
    width: 100%;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    min-width: 50px;

    cursor: pointer;
    box-sizing: border-box;
    user-select: none;

    @include core.focusable();
    @include core.border-radius($border-radius);
    @include core.typography-level(body-1);

    &-disabled {
      cursor: not-allowed;
      @include core.disabled();
    }

    &-light {
      @include core.fill(primary);
    }

    &-dark {
      @include core.fill(tertiary);
    }

    &-large {
      padding: 8px 8px 8px 12px;
    }

    &-small {
      padding: 4px 4px 4px 12px;
    }

    &-options {
      width: 100%;
      display: flex;
      flex-direction: column;

      border: 1px solid var(--color-bg-tertiary);
      border-top: none;

      &:focus-visible {
        outline: none;
      }

      @include core.border-bottom-radius-only($border-radius);
      @include core.fill(primary);
    }
  }
}