.select-menu__list {
  border: 2px solid $color--grey;
  opacity: 0;
  position: absolute;
}

// select menu open
.select-menu--open {
  @include font-style('body--m', 'body--l');
  // divider
  &::after {
    border-bottom: 1px solid $color--grey;
    content: '';
    left: 20px;
    position: absolute;
    right: 20px;
    top: $baseline * 6;
    z-index: 1;
  }
  // compensate for invisible border-bottom and additional padding on active
  // input. This is needed to prevent undesired border-bottom transition
  // when menu list closes
  &.form-group__input {
    margin-bottom: -3px;
    // IE 10/11 fix
    @include internet-explorer-10-11 {
      margin-bottom: -2px;
    }
  }
  // input
  input[type='text'] {
    &,
    &:active,
    &:focus {
      @include form-field--border-interaction-color;
      border-style: solid;
      border-width: 2px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      padding: ($baseline * 1.4) 18px $spacing--s;
      // IE 10/11 fix
      @include internet-explorer-10-11 {
        min-height: $baseline * 6.2;
      }
    }
  }
  // list
  .select-menu__list {
    @include scrollbar($direction: 'y', $size: 's');
    @include transition(border-color, $transition-duration--fast);
    @include form-field--border-interaction-color;
    background: $color--white;
    border-style: solid;
    border-width: 2px;
    border-radius: 0 0 $border-radius $border-radius;
    border-top: 0;
    left: 0;
    max-height: $select-menu-open-list-max-height;
    opacity: 1;
    right: 0;
    top: $baseline * 6;
    z-index: 1;
  }
  // select menu item
  .select-menu__item {
    @include color-dark-shade-main;
    cursor: pointer;  
    line-height: 30px;
    padding: 7px 18px;

    mark {
      background: none;
      color: $color-brand--two;
    }
    &--no-result {
      @include font-style('body--m', 'body--l');
      cursor: none;
      padding: $spacing--xs 18px $spacing--s;
      pointer-events: none;
    }
    &.select-menu__item--action {
      color: $color--one-80;
      display: flex;
      align-items: center;
      & svg {
        fill: $color--one-80;
        width: 1em;
        height: 1em;
        margin-right: 0.5em;
      }
    }
  }
  // preselected item
  .select-menu__item--preselect {
    background: $color--one-light;
  }
}
// error
.form-group--error .select-menu--open {
  input[type='text'],
  .select-menu__list {
    &,
    &:active,
    &:focus {
      @include form-field--invalid;
    }
  }
}

// viewport l
@include viewport--l {
  .select-menu--open {
    &::after {
      left: 22px;
      right: 22px;
    }
    // input
    input[type='text'] {
      &,
      &:active,
      &:focus {
        padding: ($baseline * 1.2) 18px ($baseline * 1.7);
      }
    }
    // list
    .select-menu__list {
      max-height: $select-menu-open-list-max-height--l;
      padding-top: $spacing--xs;
    }
  }
}