menu-language-item.scss

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

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

  @include breakpoint($wide) {
    @include font-size(14px, 20px);
    @include font-weight($semibold);
    color: var(--brand-main-light);
    letter-spacing: -0.5px;
    padding: 8px 12px;
    text-transform: none;

    &:hover {
      background-color: var(--grayscale-background-box);
      color: var(--brand-main);
    }
  }

  @include breakpoint($xlarge) {
    @include font-size(16px, 20px);
    letter-spacing: -0.53px;
    padding: 12px 12px;
  }

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

  &.is-active {
    @include font-weight($bold);
    color: var(--grayscale-black);

    @include breakpoint($wide) {
      @include font-weight($semibold);
      border: 2px solid var(--grayscale-black);
    }

    .hy-menu-language-item__label:after {
      content: ' ';
      border-bottom: 3px solid var(--additional-orange);
      bottom: -6px;
      left: 0;
      position: absolute;
      transform: scaleX(-1) scaleY(-1);
      width: 100%;

      @include breakpoint($wide) {
        border: none;
      }
    }
  }

  &.is-disabled {
    color: var(--link-disabled);
    &:hover {
      background-color: transparent;
      color: var(--link-disabled);
    }
  }

  &:not(.is-mobile) {
    margin: 0;
  }
}