.locale {
  float: left;
  height: $line-height * 1.5;
  margin-left: $line-height / 2;
  position: relative;

  &::after {
    color: #808080;
    content: "\61";
    font-family: "icons" !important;
    font-size: $small-font-size;
    pointer-events: none;
    position: absolute;
    right: 2px;
    top: 9px;
  }

  .locale-form {
    display: inline-block;
    position: relative;

    label {
      color: #fff;
      font-size: $tiny-font-size;
      font-weight: normal;
    }

    select {
      background: #001d33;
      border: 0;
      border-radius: rem-calc(4);
      color: #fff;
      font-size: $small-font-size;
      height: $line-height;
      margin-bottom: 0;
      margin-top: $line-height / 4;
      outline: none;
      padding-left: $line-height / 4;
      padding-right: calc(#{$line-height / 4} + 1em);
      width: auto;

      &:focus {
        outline: $outline-focus;
      }

      option {
        background: $body-background;
        color: $text;
        border: 0;
        outline: none;
      }
    }
  }
}

.locale {
  @include has-fa-icon(angle-down, solid, after);
  float: left;
  margin-bottom: $line-height / 4;
  margin-left: $line-height / 2;
  margin-top: $line-height / 4;
  position: relative;

  &::after {
    color: #808080;
    font-size: $small-font-size;
    margin-right: 0;
    pointer-events: none;
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
  }

  .locale-form {
    display: inline-block;
    position: relative;

    label {
      color: #fff;
      font-size: $tiny-font-size;
      font-weight: normal;
    }

    select {
      background: #001d33;
      border: 0;
      border-radius: rem-calc(4);
      color: #fff;
      font-size: $small-font-size;
      height: $line-height;
      margin-bottom: 0;
      outline: none;
      padding-left: $line-height / 4;
      padding-right: calc(#{$line-height / 4} + 1em);
      width: auto;

      &:focus {
        outline: $outline-focus;
      }

      option {
        background: $body-background;
        color: $text;
        border: 0;
        outline: none;
      }
    }
  }
}

Use a Font Awesome icon in locale switcher
Use a Font Awesome icon in locale switcher

We've deprecated the "icons" font since we started using Font Awesome
two years ago.
