@use '../config' as *;

.dropdown-menu {
  --dropdown-item-gap: #{$dropdown-item-gap};
  --dropdown-item-icon-size: #{$icon-size};
  --dropdown-item-icon-color: var(--tertiary);
  --dropdown-header-padding-bottom: #{$dropdown-header-padding-bottom};
  --dropdown-menu-columns-gap: #{$dropdown-menu-columns-gap};
  --dropdown-arrow-offset: #{$dropdown-arrow-offset};
  --dropdown-arrow-inset: #{$dropdown-arrow-inset};
  --dropdown-dropend-offset: #{$dropdown-dropend-offset};
  --dropdown-menu-card-min-width: #{$dropdown-menu-card-min-width};
  user-select: none;
  background-clip: border-box;

  &.card {
    display: none;
    min-width: $dropdown-max-width;
    padding: 0;

    &.show {
      display: flex;
    }
  }

  @include media-print() {
    display: none;
  }
}

.dropdown-item {
  display: flex;
  gap: var(--dropdown-item-gap, #{$dropdown-item-gap});
  align-items: center;
  min-width: $dropdown-min-width;
  margin: 0;
  line-height: $line-height-base;
}

.dropdown-item-icon {
  width: var(--dropdown-item-icon-size) !important;
  height: var(--dropdown-item-icon-size) !important;
  color: var(--dropdown-item-icon-color);
  text-align: center;
}

.dropdown-item-indicator {
  display: inline-flex;
  align-items: center;
  height: var(--dropdown-item-icon-size);
  line-height: 1;
  vertical-align: bottom;
}

.dropdown-header {
  @include subheader();
  padding-bottom: var(--dropdown-header-padding-bottom);
  pointer-events: none;
}

.dropdown-menu-scrollable {
  height: auto;
  max-height: $dropdown-scrollable-height;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.dropdown-menu-column {
  min-width: $dropdown-min-width;

  .dropdown-item {
    min-width: 0;
  }
}

.dropdown-menu-columns {
  display: flex;
  gap: var(--dropdown-menu-columns-gap);
}

.dropdown-menu-arrow {
  &::before {
    position: absolute;
    inset-inline-start: var(--dropdown-arrow-inset);
    top: calc(-1 * var(--dropdown-arrow-offset));
    z-index: -1;
    display: block;
    width: 14px;
    height: 14px;
    clip-path: inset(0 5px 5px 0);
    content: '';
    background: inherit;
    // The menu draws its edge with the 1px ring in --dropdown-box-shadow and has
    // no border, so `inherit` would give the arrow the text color.
    border: 1px solid var(--dropdown-border-color);
    // clip-path + border + rotate renders garbled edges on Firefox; only the
    // top/left border survives the clip anyway, so drop the rest.
    border-width: 1px 0 0 1px;

    /* rtl:ignore */
    transform: rotate(45deg);
    transform-origin: center;
  }

  &.dropdown-menu-end {
    &::before {
      inset-inline-start: auto;
      inset-inline-end: var(--dropdown-arrow-inset);
    }
  }
}

.dropend {
  > .dropdown-menu {
    margin-inline-start: calc(-1 * var(--dropdown-dropend-offset));
    margin-top: subtract(calc(-1 * $dropdown-padding-y), 1px);
  }

  .dropdown-toggle {
    &::after {
      margin-inline-start: auto;
    }
  }
}

.dropdown-menu-card {
  min-width: var(--dropdown-menu-card-min-width);
  padding: 0;

  > .card {
    margin: 0;
    border: 0;
    box-shadow: none;
  }
}