@use 'variables' as *;
@use '../xui';

@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 xui.border-radius($border-radius);
    @include xui.typography-level(body-1);

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

    &-light {
      @include xui.fill(secondary);
    }

    &-dark {
      @include xui.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;

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