@use '../../theme/styles' as theme;
@use '../../overlay/styles'; // shared .wr-overlay-sheet / .wr-overlay-backdrop for responsive mode

// `.wr-dropdown` is the inline trigger marker; the menu and overlay live
// in the CDK overlay portal and so are separate blocks, not elements.

.wr-dropdown {
  cursor: pointer;
}

.wr-dropdown-trigger {
  cursor: pointer;
}

.wr-dropdown-menu {
  --wr-dropdown-bg: var(--wr-color-white);
  --wr-dropdown-border: var(--wr-color-light);
  --wr-dropdown-radius: var(--wr-border-radius-base);
  --wr-dropdown-shadow: var(--wr-shadow-overlay);
  --wr-dropdown-min-width: 10rem;
  --wr-dropdown-padding: 0.25rem;

  display: flex;
  flex-direction: column;
  min-width: var(--wr-dropdown-min-width);
  padding: var(--wr-dropdown-padding);
  background: var(--wr-dropdown-bg);
  border: 1px solid var(--wr-dropdown-border);
  @include theme.smooth-br(var(--wr-dropdown-radius));
  box-shadow: var(--wr-dropdown-shadow);
  font-family: var(--wr-font-family-base);
  // Match popover / popconfirm / context-menu open feel.
  animation: wr-overlay-in var(--wr-overlay-duration) var(--wr-overlay-ease);
  transform-origin: top left;
}

.wr-dropdown-overlay {
  // Positional offsets between trigger and menu by side.
  &--top,
  &--top-start,
  &--top-end {
    padding-bottom: 0.25rem;
  }

  &--bottom,
  &--bottom-start,
  &--bottom-end {
    padding-top: 0.25rem;
  }

  &--left {
    padding-right: 0.25rem;
  }

  &--right {
    padding-left: 0.25rem;
  }
}

.wr-dropdown-item {
  --wr-dropdown-item-padding-y: 0.375rem;
  --wr-dropdown-item-padding-x: 0.625rem;
  --wr-dropdown-item-color: var(--wr-color-dark);
  --wr-dropdown-item-bg-hover: var(--wr-color-hover);
  --wr-dropdown-item-radius: var(--wr-border-radius-sm);

  display: flex;
  align-items: center;
  gap: 0.5rem;
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--wr-dropdown-item-padding-y) var(--wr-dropdown-item-padding-x);
  border-radius: var(--wr-dropdown-item-radius);
  color: var(--wr-dropdown-item-color);
  font: inherit;
  font-size: var(--wr-text-sm);
  line-height: 1.25rem;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background var(--wr-transition-short);

  &:hover,
  &:focus-visible {
    background: var(--wr-dropdown-item-bg-hover);
    outline: none;
  }

  &__icon {
    --wr-icon-size: 1rem;
    flex: 0 0 auto;
    color: var(--wr-color-medium);
  }

  &__label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &--disabled {
    color: var(--wr-color-medium);
    cursor: not-allowed;
    opacity: 0.6;

    &:hover {
      background: transparent;
    }
  }
}