$base-class: '.sui-MoleculeDropdownList';

#{$base-class} {
  background: $bc-dropdown-list;
  border-radius: $bdrs-dropdown-list;
  box-sizing: $bxz-dropdown-list;
  margin: 0;
  overflow-y: auto;
  padding: $p-dropdown-list;
  width: 100%;

  &.is-hidden {
    display: none;
  }

  &--position {
    &-top {
      display: flex;
      flex-direction: column-reverse;
      border-radius: $bdrs-dropdown-list-top;
    }
  }

  &--design {
    &-solid {
      border: $bd-dropdown-list;
      box-shadow: $bxsh-dropdown-list;
    }
    &-flat {
      margin: $m-dropdown-list--design-flat;
    }
  }

  @each $sizeKey, $sizeValue in $h-sizes-dropdown-list {
    &--size-#{$sizeKey} {
      max-height: $sizeValue;
    }
  }

  &:focus {
    outline: none;
  }
}