.header {
  &.bg-red {
    background-color: var(--color-red-light);


    .header-navigation-primary-link-dropdown-list {
      background-color: var(--color-red-light);
    }
  }
}

.header-nav-brand {
  margin-left: 45px;
  width: 120px;
  height: 100%;
  position: relative;
  z-index: 10;
}

.header-brand {
  a {
    display: block;
  }
}

.header-navigation {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 55px;
  width: 100%;
  margin: 0 0 0 50px;

  &.collapsed {
    .header-navigation-secondary {
      display: none;
    }

    @media (max-width: 768px) {
      justify-content: flex-end;
    }

    .header-actions-close {
      display: none;
    }
  }

  &.text-white {
    .header-navigation-primary-link {
      color: var(--color-white);

      a {
        &.active {
          &:after {
            background-color: var(--color-white);
          }
        }

        &:hover {
          &:after {
            background-color: var(--color-red);
          }
        }
      }
    }

    .header-actions {
      svg {
        path {
          fill: var(--color-white);
        }
      }
    }
  }

  &.search {
    position: fixed;
    justify-content: center;
    left: 0;
    right: 0;
    top: 0;
    margin: 0;
    background-color: var(--color-primary);
    z-index: 999;
    padding: 100px calc(var(--grid-gutter-width) / 2) 50px calc(var(--grid-gutter-width) / 2);
    transition: padding 250ms ease-in;


    &::before {
      content: '';
      position: absolute;
      top: 0;
      width: 100vw;
      height: 100vh;
      left: 0;
      background-color: var(--color-primary);
      opacity: 0.6;
      z-index: -1;
    }

    &::after {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      width: calc(100% + 100px);
      height: 300px;
      background-color: var(--color-primary);
      transform: rotate(-3.75deg);
      transform-origin: bottom right;
      z-index: -1;
    }

    .header-search {
      display: flex;
    }
    .header-actions-mobile {
      display: none;
    }

    .header-actions-search {
      display: none;
    }

    .header-navigation-primary {
      display: none;
    }

    .header-navigation-secondary {
      display: none;
    }

    .header-actions-close {
      position: absolute;
      top: 0;
      right: 0;
      padding-right: calc(var(--grid-gutter-width) / 2);

      @media (min-width: 576px) {
        margin-right: 0;
      }
      @media (min-width: 576px) {
        margin-right: 0;
      }

      @media (min-width: 992px) {
        margin-right: calc(50% - (992px / 2));
      }

      @media (min-width: 1200px) {
        margin-right: calc(50% - (1200px / 2));

      }

      @media (min-width: 1400px) {
        margin-right: calc(50% - (1400px / 2));
      }
    }
  }

  &.navigation {
    position: fixed;
    justify-content: center;
    left: 0;
    right: 0;
    top: 0;
    margin: 0;
    background-color: var(--color-primary);
    z-index: 999;
    padding: 160px calc(var(--grid-gutter-width) / 2);
    transition: padding 250ms ease-in;

    @media (max-width: 768px) {
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 30px
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      width: 100vw;
      height: 100vh;
      left: 0;
      background-color: var(--color-primary);
      opacity: 0.6;
      z-index: -1;
    }

    &::after {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      width: calc(100% + 100px);
      height: 300px;
      background-color: var(--color-primary);
      transform: rotate(-3.75deg);
      transform-origin: bottom right;
      z-index: -1;
    }

    .header-navigation-primary {
      flex-direction: column;
      gap: 30px;
      display: flex;
    }

    .header-navigation-primary-link {
      color: var(--color-white);
      font-size: var(--font-size-larger);

      @media (max-width: 768px) {
        text-align: center;
      }
    }

    .header-actions-mobile, .header-actions-search {
      display: none;
    }

    .header-actions {
      position: absolute;
      top: 0;
      right: 0;
      padding-right: calc(var(--grid-gutter-width) / 2);

      @media (min-width: 576px) {
        margin-right: 0;
      }
      @media (min-width: 768px) {
        margin-right: 0;
      }

      @media (min-width: 992px) {
        margin-right: calc(50% - (992px / 2));
      }

      @media (min-width: 1200px) {
        margin-right: calc(50% - (1200px / 2));

      }

      @media (min-width: 1400px) {
        margin-right: calc(50% - (1400px / 2));
      }
    }
  }
}

.header-navigation-primary {
  display: flex;
  position: relative;
  z-index: 10;
  padding: 0;
  gap: 50px;
  margin: 0 30px 0 0;
  list-style-type: none;

  @media (max-width: 1200px) {
    display: none;
  }
}

.header-navigation-secondary {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0 0 0 200px;
  list-style-type: none;
  gap: 50px;

  @media (max-width: 768px) {
    text-align: center;
    gap: 30px;
    margin: 0;
  }
}

.header-actions {
  display: flex;
  gap: 20px;
}

.header-actions-search {
  cursor: pointer;
  position: relative;
  z-index: 10;
  margin-right: 60px;

  &:hover {
    svg {
      path {
        fill: var(--color-red);
      }
    }
  }
}

.header-actions-mobile {
  cursor: pointer;
  position: relative;
  z-index: 10;

  @media (min-width: 1200px) {
    display: none;
  }

  &:hover {
    svg {
      path {
        fill: var(--color-red);
      }
    }
  }
}

.header-search {
  display: none;
  max-width: 350px;
  width: 100%;

  form {
    width: 100%;
  }

  h2 {
    color: var(--color-white);
    font-size: var(--font-size-large);
    text-align: center;
  }
}

.header-actions-close {
  color: var(--color-secondary);
  font-size: var(--font-size-small);
  cursor: pointer;

  svg {
    margin: 30px 7px 0 0;
    width: 11px;
    height: 11px;
  }

  &:hover {
    color: var(--color-white);

    svg {
      path {
        fill: var(--color-white);
      }
    }
  }
}

.header-navigation-primary-link {
  color: var(--color-primary);

  a, button {
    color: inherit;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-regular);
    text-decoration: none;
    position: relative;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;

    &:hover, &:focus {
      color: var(--color-red);

      &:after {
        transform: scale(1);
        background-color: var(--color-red);
      }
    }

    &.active {
      color: var(--color-red);

      &::after {
        transform: scale(1);
      }
    }

    &::after {
      position: absolute;
      content: '';
      width: 100%;
      height: 2px;
      background-color: var(--color-red);
      bottom: -5px;
      left: 0;
      transform-origin: center;
      transform: scale(0);
      transition: transform 200ms ease-in-out;
    }
  }

  button {

    &:hover, &:focus {
      color: var(--color-primary);
    }

    &::after {
      display: none;
    }
  }



  &.dropdown {
    position: relative;

    &:hover, &:focus-within {
      .header-navigation-primary-link-dropdown-list {
        visibility: visible;
      }
    }

    button {
      display: none;

      @media (min-width: 1200px) {
        display: block;
      }
    }
  }
}

.header-navigation-primary-link-dropdown-list {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;

  @media (min-width: 1200px) {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: -25px;
    width: max-content;
    padding: 35px 25px 5px 25px;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    background: var(--color-white);
    gap: 0;

    li {
      padding: 10px;
      border-top: 1px solid var(--color-red);
      width: 100%;
      margin: 0 !important;

      &:first-child {
        border-top: 0;
      }

      a {
        &::after {
          display: none;
        }
      }
    }
  }


}

.header-navigation-secondary-link {
  color: var(--color-secondary);
  font-size: var(--font-size-medium-larger);

  a {
    color: inherit;
    text-decoration: none;

    &:hover, &:focus {
      color: var(--color-white);
    }
  }
}