menu-language-item.scss

:host(.hy-menu-item) {
  display: flex;
}

a {
  @include font-size(12px, 20px);
  @include font-weight($regular);
  align-items: center;
  color: var(--brand-main-nearly-black);
  display: flex;
  font-family: var(--main-font-family);
  letter-spacing: -0.4px;
  margin-left: 20px;
  text-decoration: none;
  text-transform: uppercase;

  @include breakpoint($wide) {
    @include font-size(15px, 20px);
    color: var(--brand-main-light);
    font-weight: 700;
    padding: 0 40px 32px;

    &:hover {
      background-color: var(--grayscale-background-box);
      color: var(--brand-main);
    }
  }
  @include breakpoint($extrawide) {
    @include font-size(15px, 20px);
    color: var(--brand-main-light);
    font-weight: 700;
    padding: 0 32px 22px;
  }
  @include breakpoint($overwide) {
    @include font-size(18px, 22px);
    padding: 0 40px 32px;
  }

  &:focus {
    outline: solid 2px var(--additional-yellow);
    outline-offset: 2px;
  }

  &.is-active {
    .hy-menu-language-item__label {
      color: var(--grayscale-black);
      font-weight: 700;
      border-bottom: 2px solid var(--additional-orange);

      @include breakpoint($wide) {
        border-bottom: 3px solid var(--grayscale-black);
        padding-bottom: 6px;
      }
      @include breakpoint($extrawide) {
        border-bottom: 3px solid var(--grayscale-black);
        padding-bottom: 6px;
      }
      @include breakpoint($overwide) {
        padding-bottom: 8px;
      }
    }
  }

  &:not(.is-mobile) {
    //@include font-size(16px, 20px);
    margin: 0;
    // margin: 0 0 5px;
  }
}