.sui-o-dropdown {
  z-index: $sui-z-index-o-dropdown;
  display: inline-block;
  opacity: 0;
  pointer-events: none;
  background: $sui-color-brand-denim-100;
  border-radius: $sui-border-radius-md;
  box-shadow: $sui-shadow-200;
  padding: $sui-space-sm;
  min-width: $sui-size-lg;
  max-width: 100%;
  max-height: 40vh;
  font-size: 1rem;
  overflow: auto;
  transition: opacity .2s;

  &:not(.as--open) {
    position: absolute;
    top: 0;
    left: 0;
  }

  &.as--open {
    opacity: 1;
    pointer-events: auto;
  }

  &__spacer {
    margin: $sui-space-xs 0;
    border-bottom: $sui-size-border*2 solid $sui-color-border-light;
  }

  &__link {
    display: block;
    color: inherit;
    font-size: $sui-font-size-ms;
    padding: $sui-space-xs $sui-space-sm;
    text-decoration: none;
    text-align: left;
    width: 100%;
    max-width: $sui-size-xxl;
    border-radius: $sui-border-radius-md;
    transition: .2s;

    & + & {
      margin-top: $sui-space-xxs;
    }

    &:hover,
    &.as--open {
      background: $sui-color-brand-denim-300;
    }

    &:focus {
      background: $sui-color-brand-denim-300;
      box-shadow: inset 0 0 0 rem(2) rgba($sui-color-primary, .25);
    }

    &.as--active {
      color: $sui-color-brand-denim-100;
      background: $sui-color-primary;

      &:focus {
        box-shadow: inset 0 0 0 rem(2) rgba($sui-color-brand-denim-300, .25);
      }
    }

    &.as--disabled,
    &:disabled {
      pointer-events: none;
      color: $sui-color-brand-denim-400;
      background: $sui-color-brand-denim-200;
    }

    position: relative;

    .sui-a-icon {
      position: absolute;
      right: $sui-space-sm;
      top: $sui-space-xs;
    }
  }

  .sui-a-form-check {
    font-size: 0.875rem;
    align-items: center;
  }
}
