.select {
  @apply border border-base-content border-opacity-0 bg-base-100 pr-10 font-semibold rounded-btn;
  &-bordered {
    @apply border-opacity-20;
  }
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16px) calc(1px + 50%);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  &:focus {
    outline: 2px solid hsla(var(--bc) / 0.2);
    outline-offset: 2px;
  }
  &-ghost {
    @apply bg-opacity-5;
    &:focus {
      @apply bg-opacity-100 text-base-content;
    }
  }
  &-primary {
    @apply border-primary;
    &:focus {
      outline: 2px solid hsl(var(--p));
    }
  }
  &-secondary {
    @apply border-secondary;
    &:focus {
      outline: 2px solid hsl(var(--s));
    }
  }
  &-accent {
    @apply border-accent;
    &:focus {
      outline: 2px solid hsl(var(--a));
    }
  }
  &-info {
    @apply border-info;
    &:focus {
      outline: 2px solid hsl(var(--in));
    }
  }
  &-success {
    @apply border-success;
    &:focus {
      outline: 2px solid hsl(var(--su));
    }
  }
  &-warning {
    @apply border-warning;
    &:focus {
      outline: 2px solid hsl(var(--wa));
    }
  }
  &-error {
    @apply border-error;
    &:focus {
      outline: 2px solid hsl(var(--er));
    }
  }
  &-disabled,
  &[disabled] {
    @apply cursor-not-allowed border-base-200 bg-base-200 text-opacity-20 placeholder-base-content placeholder-opacity-20;
  }
  &-multiple,
  &[multiple],
  &[size]&:not([size="1"]) {
    @apply bg-none pr-4;
  }
}

[dir="rtl"] .select {
  background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%);
}
