/* ==================================
   #DROPDOWN
   ================================== */

/* Variables
   ========================================================================== */

$au-dropdown-caret-size: 0.4rem !default;

/* Component
  ========================================================================== */

.au-c-dropdown {
  display: inline-block;
}

.au-c-dropdown > .au-c-button--naked {
  padding: 0 $au-unit-tiny * 0.5;
  height: auto;
  line-height: 1.5;
}

.au-c-dropdown__name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: $au-unit-large;

  @include mq(xsmall) {
    max-width: $au-unit-huge;
  }

  @include mq(small) {
    width: auto;
    max-width: $au-unit-huge * 4;
  }
}

.au-c-dropdown__floater {
  z-index: var(--au-z-index-beta);
  width: auto;

  box-shadow:
    0 0 12px rgba($au-gray-900, 0.15),
    0 0 2px rgba($au-gray-900, 0.1);
  border-radius: var(--au-radius);
  background-color: var(--au-white);

  @include au-font-size(var(--au-base), 1.5);
  font-family: var(--au-font);
  font-weight: var(--au-regular);
}

.au-c-dropdown__arrow {
  position: absolute;

  &:before,
  &:after {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-width: $au-dropdown-caret-size;
    margin-left: -$au-dropdown-caret-size * 0.5;
  }

  &:before {
    border-color: rgba($au-white, 0);
    border-bottom-color: var(--au-divider-color);
  }

  &:after {
    border-color: rgba($au-white, 0);
    border-bottom-color: var(--au-white);
  }
}

.au-c-dropdown__menu {
  position: relative;
  z-index: var(
    --au-z-index-beta
  ); // Re-apply z-index to fix overlapping arrow when focussing on a menu item
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;

  &:focus {
    outline: 0;
  }
}

.au-c-dropdown__menu > .au-c-hr {
  margin: 0;
}

.au-c-dropdown__menu [role="menuitem"] {
  padding: $au-unit-tiny;
  height: auto;
  overflow: hidden;
  text-decoration: none;
  border-radius: 0;

  &:first-child {
    border-top-right-radius: var(--au-radius);
    border-top-left-radius: var(--au-radius);
  }

  &:last-child {
    border-bottom-right-radius: var(--au-radius);
    border-bottom-left-radius: var(--au-radius);
  }

  &.active {
    color: var(--au-gray-900);
    background-color: var(--au-gray-100);
    font-weight: var(--au-medium);
    outline-offset: var(--au-outline-offset-negative);
  }

  &:focus,
  &.active:focus {
    outline-offset: var(--au-outline-offset-negative);
  }
}

.au-c-dropdown__menu > [role="menuitem"] + [role="menuitem"],
.au-c-dropdown__menu > [role="group"] + [role="group"],
.au-c-dropdown__menu > [role="group"] + [role="menuitem"],
.au-c-dropdown__menu > [role="menuitem"] + [role="group"] {
  border-top: 0.1rem dotted var(--au-gray-300);
}