dropdown.scss

/**
* CSS Custom Properties
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-dropdown-width: Specifies the width of the component's wrapper.
*/

:host {
  @apply inline-block;
}

.calcite-dropdown-wrapper {
  --calcite-floating-ui-z-index: theme("zIndex.dropdown");
  @include floating-ui-container();
}

@include floating-ui-elem-anim(".calcite-dropdown-wrapper");

.calcite-dropdown-content {
  @apply bg-foreground-1
  w-auto
  overflow-y-auto
  overflow-x-hidden
  max-h-menu;
  inline-size: var(--calcite-dropdown-width);
}

.calcite-trigger-container {
  @apply relative flex flex-auto h-full;
  @include word-break;
}

.width-s {
  --calcite-dropdown-width: theme("spacing.48");
}

.width-m {
  --calcite-dropdown-width: theme("spacing.56");
}

.width-l {
  --calcite-dropdown-width: theme("spacing.64");
}

@media (forced-colors: active) {
  /* use real border since box-shadow is removed in high contrast mode */
  :host([open]) .calcite-dropdown-wrapper {
    border: 1px solid canvasText;
  }
}

@include base-component();
@include disabled();