calcite-select.scss

/**
 * CSS Custom Properties
 *
 * These properties can be overridden using the component's tag as selector.
 *
 * @prop --calcite-select-font-size: the font-size of items in the select
 * @prop --calcite-select-spacing: the padding around the selected option text
 */

:host {
  @extend %component-spacing;

  @apply flex
    items-stretch
    relative;
  width: var(--select-width);
}

:host([scale="s"]) {
  @apply h-6;
  --calcite-select-font-size: theme("fontSize.-2h");
  --calcite-select-spacing-inline: theme("spacing.2") theme("spacing.8");
  .icon-container {
    @apply px-2;
  }
}

:host([scale="m"]) {
  @apply h-8;
  --calcite-select-font-size: theme("fontSize.-1h");
  --calcite-select-spacing-inline: theme("spacing.3") theme("spacing.10");
  .icon-container {
    @apply px-3;
  }
}

:host([scale="l"]) {
  height: 44px;
  --calcite-select-font-size: theme("fontSize.0h");
  --calcite-select-spacing-inline: theme("spacing.4") theme("spacing.12");
  .icon-container {
    @apply px-4;
  }
}

:host([width="auto"]) {
  @apply w-auto;
}

:host([width="half"]) {
  @apply w-1/2;
}

:host([width="full"]) {
  @apply w-full;
}

.select {
  @apply appearance-none
    border
    border-solid
    bg-foreground-1
    border-color-input
    rounded-none
    text-color-2
    cursor-pointer
    font-inherit
    m-0
    w-full
    focus-base
    box-border
    truncate;
  font-size: var(--calcite-select-font-size);
  padding-inline: var(--calcite-select-spacing-inline);
  border-inline-end-width: theme("borderWidth.0");

  &:focus {
    @apply focus-inset;
  }

  &:hover {
    @apply bg-foreground-2;
  }
}

// override user agent stylesheet disabled styling
select:disabled {
  @apply border-color-input bg-opacity-100;
}

:host([disabled]) {
  @apply pointer-events-none select-none opacity-disabled;
}

.icon-container {
  @apply items-center
    bg-transparent
    border-0
    border-solid
    border-color-input
    text-color-2
    flex
    pointer-events-none
    absolute
    inset-y-0;
  inset-inline-end: theme("inset.0");
  border-inline-width: theme("borderWidth.0") theme("borderWidth.DEFAULT");
}

.select:focus ~ .icon-container {
  @apply border-color-transparent;
}

@include hidden-form-input();