_page-menu.scss

@use "variables";

$svg-height: 24;
$trans-timing: 600ms;

@mixin svg-menu-icon($color: currentColor, $height: $svg-height) {
  background: url("../img/menu.svg") no-repeat 50%;
}

@mixin rotate-submenu-toggle() {
  transform: rotateX(180deg);
}

.skip-menu {
  position: absolute;
  top: 10px;
  right: 84px;
  z-index: 10;
  opacity: 0;

  &:focus {
    opacity: 1;
  }
}

.page-menu {
  $mobile-mt: 15px;

  width: 100%;
  margin-top: $mobile-mt;
  font-size: 18px;
  text-align: end;

  .submenu {
    flex: 0 0 100%;
    max-height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    list-style: none;
    transition: max-height $trans-timing ease;

    &:focus-within {
      max-height: none;
    }

    &-item {
      width: 100%;
    }

    &-item a {
      font-weight: 500;

      &:hover {
        font-weight: 500;
        color: variables.$color-primary;
        text-decoration: none;
      }
    }

    &-toggle {
      flex: 0 0 1.5rem;
      padding: 0;
      margin: 0 0 0 0.5rem;
      cursor: pointer;
      background: transparent;
      border: none;

      &::after {
        display: block;
        width: 1.5rem;
        height: 1.5rem;
        content: "";
        background: url("../img/menu-down.svg") no-repeat 50%;
        background-size: 1.5rem;
        transition: transform $trans-timing ease;
      }

      &.open::after {
        @include rotate-submenu-toggle;
      }
    }

    &.open {
      max-height: none;
    }
  }

  .menu {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    display: block;
    width: 100%;
    max-height: 0;
    padding: ($svg-height + $mobile-mt) 20px 10px 0;
    margin: 0;
    overflow: hidden;
    list-style-type: none;
    background: variables.$color-submenu-bg;
    border-bottom: 1px solid variables.$color-spacer;
    transition: max-height $trans-timing ease;

    [dir="rtl"] & {
      padding: ($svg-height + $mobile-mt) 0 10px 20px;
    }

    &:focus-within,
    &:target {
      max-height: none;
    }

    &-toggle {
      position: relative;
      z-index: 10;
      display: inline-block;
      padding: 10px;
      margin: -10px;

      &-text {
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
      }

      &::after {
        @include svg-menu-icon(variables.$color-tc39);

        display: block;
        width: 1.5rem;
        height: 1.5rem;
        content: "";
        background-size: 1.5rem;
      }
    }

    &-link {
      display: block;
      flex: 0 0 calc(100% - 2rem);
      min-width: 150px;
      padding: 10px;
      font-weight: 600;
      color: variables.$color-nav;
      text-decoration: none;
      cursor: pointer;

      &:focus {
        ~ .submenu-toggle {
          @include rotate-submenu-toggle;
        }

        ~ .submenu {
          max-height: none;
          overflow: visible;
        }
      }

      &:hover,
      &:focus {
        font-weight: variables.$font-weight-semi-bold;
        color: variables.$color-primary;
        text-decoration: none;
      }
      /* stylelint-disable-next-line no-descending-specificity */
      &__language {
        min-width: 24px;
        height: 40px;
        margin-left: auto;
      }
    }

    &-item {
      display: block;

      &.has-submenu {
        display: flex;
        flex-wrap: wrap;
      }

      &__language {
        display: block;
        width: 100%;
        margin-left: auto;
        /* stylelint-disable-next-line no-descending-specificity */
        .submenu {
          margin-left: 0;
        }
      }
    }

    @media (min-width: variables.$bp-desktop) {
      &-link {
        padding: 10px 40px;
      }
    }
  }

  &.open .menu-toggle,
  &:focus-within .menu-toggle {
    &::after {
      @include svg-menu-icon;
    }
  }

  @media (min-width: variables.$bp-tablet) {
    $mt: 73.6px;

    margin-top: $mt;
    border-bottom: 1px solid variables.$color-spacer;

    .submenu {
      position: absolute;
      font-size: 16px;
      background: variables.$color-submenu-bg;
      border-top: 2px solid variables.$color-spacer;

      &-toggle {
        display: none;
      }

      &-item {
        border-bottom: 1px solid variables.$color-spacer;
        border-left: 4px solid variables.$color-link;
      }

      &-item:last-child {
        border-bottom: 1px solid transparent;
      }

      &-item:hover,
      &-item:focus {
        display: inline-block;
        min-width: 120px;
      }
    }

    .menu {
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      max-height: none;
      padding: 0;
      overflow: visible;
      text-align: start;
      background: variables.$color-submenu-bg;

      &-toggle {
        display: none;
      }

      &-item {
        &.has-submenu {
          display: block;
        }

        &:hover .submenu {
          max-height: none;
          overflow: visible;
        }

        &__language {
          width: 50px;
          margin-left: 0;
          /* stylelint-disable-next-line no-descending-specificity */
          .submenu {
            margin-left: -105px;
          }
        }
      }

      &-link {
        flex: none;

        &__language {
          flex-shrink: 1;
          min-width: 50px;
          height: 47px;
          padding: 10px 0;
          overflow: hidden;

          svg {
            width: 24px;
          }

          &-text {
            display: none;
          }
        }
      }
    }
  }
}