.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;

  @include viewport--l {
    height: $baseline * 6;
    cursor: pointer;

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

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