.language__dropdown {
  align-items: center;
  display: flex;
  margin-left: auto;
  position: relative;
  width: 60px;

  & .icon--language {
    left: 0;
    z-index: 0;

    & svg {
      height: $spacing--s;
      width: 20px;
    }
  }

  & select,
  & select:active,
  & select:focus {
    padding: 0 25px;
  }

  select {
    background: transparent;
    border: none;
    cursor: pointer;
    color: currentColor;
    min-height: unset;
    text-overflow: initial;
    width: auto;
    z-index: 2;

    //hide native arrow for dropdown so only styled chevron is visible
    &::-ms-expand {
      display: none;
    }

    option {
      color: $color-brand--two;
    }
  }

  .select--status {
    height: $baseline * 0.8;
    width: 8px;
  }

  // background mappings mobile
  @include language-dropdown-background-mapping;
}

// styling changes from viewport L onwards
.hidden--until-l .language__dropdown {
  height: $baseline * 6;
  cursor: pointer;

  [class*='bg-brand--'] & .icon svg {
    color: currentColor;
  }

  select {
    @include font-style('body--m');

    & option {
      color: $color-brand--two;
    }
  }

  select,
  .select--status {
    cursor: pointer;
  }
}
