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(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 breakpoint($wide) {
      border: 2px solid var(--grayscale-black);
    }

    .hy-menu-language-item__label {
      color: var(--grayscale-black);
      border-bottom: 2px solid var(--additional-orange);

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

  &.is-disabled {
    @include breakpoint($wide) {
      color: var(--link-disabled);

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

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