.ca-header-navigation {
  $block: &;
  $header-navigation-height-computer: rem-calc(50px) !default;

  height: $header-navigation-height-computer;
  background-color: var(--header-bg, #{$c-header-bg});
  color: var(--header-text, #{$c-text-primary});

  body[style='overflow: hidden;'] & {
    padding-right: var(--scrollbar-width);
  }

  &__items {
    @include flex-calign;

    height: $header-navigation-height-computer;
  }

  &__item {
    .ca-icon-and-text {
      &__icon {
        transition: transform 150ms;
      }
    }

    &--open {
      #{$block}__children {
        pointer-events: initial;
        margin-top: 0;
        opacity: 1;
      }

      > #{$block}__link {
        .ca-icon-and-text {
          column-gap: rem-calc(6);

          &__text {
            margin-right: 0;
          }

          &__icon {
            transform: rotate(-180deg);
          }
        }
      }
    }
  }

  &__link {
    font-size: $font-size-m;
    padding: 0 $px32;
    height: $header-navigation-height-computer;
    display: flex;
    align-items: center;
    line-height: 1;
  }

  &__children {
    background-color: var(--header-bg, #{$c-header-bg});
    color: var(--header-text, #{$c-text-primary});
    opacity: 0;
    margin-top: 10px;
    pointer-events: none;
    position: absolute;
    transition: all 150ms ease;
    z-index: $z-index-header;
    box-shadow: 0 5px 10px -3px rgb(0 0 0 / 3%);
  }

  &__children-show-all {
    font-size: $font-size-s;
    text-decoration: underline;
    display: block;
    margin-top: $px24;
  }

  &--full-width {
    #{$block}__children {
      width: 100%;
      left: 0;
      max-height: calc(90vh - #{$header-height-computer});
      overflow: auto;
    }

    #{$block}__children-list {
      padding: $px32 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: rem-calc(40px);

      @include bp(desktop) {
        grid-template-columns: repeat(5, 1fr);
      }

      @include bp(desktop) {
        grid-template-columns: repeat(5, 1fr);
      }
      /* stylelint-disable */
      @media screen and (min-width: $site-width) {
        grid-template-columns: repeat(6, 1fr);
      }
      /* stylelint-enable */
    }

    #{$block}__child-link {
      font-weight: $font-weight-bold;
      text-transform: uppercase;
    }

    #{$block}__grand-children {
      margin: rem-calc(8) 0;
    }
  }

  &--boxed {
    #{$block}__item {
      position: relative;
    }

    #{$block}__children {
      background-color: $c-white;
      top: 100%;
      font-weight: $font-weight-normal;
      min-width: 180px;
      padding: rem-calc(18) 0;
    }

    #{$block}__child-item,
    #{$block}__grand-child-item {
      position: relative;
      padding: rem-calc(10) rem-calc(50) rem-calc(10) rem-calc(28);

      &--parent {
        &:hover {
          #{$block}__grand-children {
            pointer-events: initial;
            opacity: 1;
            margin-left: 0;
          }
        }
      }
    }

    #{$block}__child-parent-wrap {
      width: 100%;
      justify-content: space-between;
    }

    #{$block}__child-link,
    #{$block}__grand-child-link {
      display: inline-block;
      white-space: nowrap;
      position: relative;

      &::before {
        @include halign;

        content: '';
        width: 0%;
        height: 3px;
        background-color: var(--accent-color, $c-accent-color);
        bottom: -3px;
        opacity: 0;
        transition: all 250ms ease;
      }

      &:hover {
        &::before {
          opacity: 1;
          width: 100%;
        }
      }

      &.nuxt-link-active {
        &::before {
          opacity: 1;
          width: 100%;
        }
      }
    }

    #{$block}__icon {
      @include valign;

      right: rem-calc(18);
    }

    #{$block}__grand-children {
      background-color: $c-white;
      position: absolute;
      left: 100%;
      top: 0;
      min-width: 180px;
      padding: rem-calc(18) 0;
      pointer-events: none;
      opacity: 0;
      transition: all 150ms ease;
      margin-left: 10px;
    }
  }
}