.fade-out {
  animation: fade-out 0.3s ease-out forwards;
}

body:has(.navbar .overlay_hover:hover) {
  .secondary-navbar-container {
    &.variation1,
    &.variation2 {
      z-index: 9;
    }
  }
}
/* .fade-in {
  animation: fade-in 0.3s ease-out forwards;
} */

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    visibility: visible;
  }
}

.secondary-navigation-container {
  &.tab-item {
    visibility: hidden;
    overflow: hidden;
    height: 0;
  }

  &.tab-item-active {
    visibility: visible;
    overflow: visible;
    height: 100%;
  }
}

.hideLocation {
  visibility: hidden;
}

.secondary-navigation-wrapper:has(.variation1) {
  height: 56px;
  @media (width >=1024px) {
    height: 64px;
  }
}

.secondary-navigation-wrapper:has(.variation2) {
  @media (width >=1024px) {
    height: 40px;
  }
}

.secondary-navbar-container {
  &.variation1 {
    background-color: var(--nav-background-color);
    padding: 8px 0px 8px 20px;
    z-index: 998;
    width: 100vw;
    height: 56px;

    .secondary-navbar {
      display: flex;
      align-items: center;
      gap: 14px;

      .logo-container {
        display: none;
      }

      .hamburger-icon {
        border: none;
        background: url('/icons/hamburger-gray.svg') no-repeat center;
        width: 24px;
        height: 24px;
        padding: 0;
        flex-shrink: 0;
        cursor: pointer;
      }

      .buttons-container {
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        display: flex;
        align-items: center;

        /* ios scroll fix */
        &::-webkit-scrollbar {
          display: none;
        }

        .switchList-next-arrow,
        .switchList-prev-arrow {
          width: 4px;
          height: 4px;
          border: none;
          z-index: 100;
          margin: unset;
          padding: 14px 4px;
          position: relative;
        }

        .switchList-next-arrow {
          background: url('/icons/arrow-next.svg') center no-repeat;
          margin-left: 15px;
          margin-right: 15px;
          /* display: none; */
        }

        .switchList-prev-arrow {
          background: url('../../icons/arrow-prev.svg') center no-repeat;
          margin-right: 15px;

          @media (width >=480px) {
            display: none;
          }
        }

        .buttons-list {
          z-index: 100;
          position: relative;
          display: flex;
          flex-direction: row;
          width: max-content;
          align-items: center;
          white-space: nowrap;
          margin: unset;
          border-bottom: 1px solid var(--secondary-main);
          overflow: scroll;
          scrollbar-width: none;
          padding: 0;

          &::-webkit-scrollbar {
            display: none;
          }

          .nav-button {
            padding: 11px 24px;
            p {
              color: var(--secondary-main);
              font-family: var(--font-primary-nexa);
              text-align: center;
              font-size: 0.75rem;
              text-decoration: none;
              font-weight: 400;
              line-height: 1rem;
              position: relative;
              word-wrap: break-word;
            }

            &.active {
              border-bottom: 2px solid var(--primary-main);
              p {
                color: var(--primary-main);
                font-weight: 500;
              }
            }
          }

          p,
          h2,
          h3 {
            margin: unset;
          }
        }
      }
    }
  }

  &.variation2 {
    display: none;
    position: relative;
    z-index: 999;

    .secondary-navbar {
      background-color: var(--tertiary-white);
      padding: 20px;
      padding-bottom: 16px;
      position: absolute;
      z-index: 999;
      left: 0;
      top: -56px;
      width: 76%;

      .logo-container {
        align-items: center;
        margin-bottom: 12px;
        display: block;
        font-family: var(--font-primary-nexa);
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.25rem;
        color: var(--primary-main);
        gap: 8px;

        &.back-button {
          display: flex;
          align-items: center;
        }

        &::before {
          content: '';
          display: inline-block;
          background: url('/icons/chevron-left.svg') no-repeat center;
          width: 24px;
          height: 24px;
          margin-top: -3px;
        }

        span {
          display: inline-block;
          width: 99px;
          height: 24px;
          img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
          }
        }
      }

      .buttons-container {
        .buttons-list {
          display: flex;
          flex-direction: column;
          margin: unset;

          .nav-button {
            padding: 12px 8px;
            p {
              width: 100%;
              display: flex;
              align-items: center;
              gap: 4px;
              color: var(--secondary-main);
              font-family: var(--font-primary-nexa);
              text-align: center;
              font-size: 0.875rem;
              text-decoration: none;
              font-weight: 400;
              line-height: 1.25rem;
              position: relative;
              word-wrap: break-word;
              border-bottom: 1px solid var(--tertiary-light-grey);
            }

            &.active {
              p {
                color: var(--primary-main);
                font-weight: 500;
              }
            }
          }

          p,
          h3 {
            margin: unset;
            white-space: nowrap;
          }
        }
      }
    }

    .secondary-navbar.scroll-active {
      top: 0;
    }
  }
}

@media (width >= 768px) {
  .secondary-navbar-container {
    &.variation2 {
      & .secondary-navbar {
        & .buttons-container {
          .buttons-list {
            width: 100%;
          }
        }
      }
    }
  }
}

@media (width >=1024px) {
  .secondary-navbar-container {
    &.variation1 {
      padding: 18px 56px;
      background-color: var(--tertiary-white);
      height: 64px;

      .secondary-navbar {
        justify-content: space-between;
        gap: 0;

        .logo-container {
          display: block;
          font-family: var(--font-primary-nexa);
          font-size: 1.5rem;
          font-weight: 500;
          line-height: 2rem;
          color: var(--primary-main);

          span {
            display: inline-block;
            width: 117px;
            height: 30px;
            img {
              max-width: 100%;
              max-height: 100%;
              object-fit: contain;
            }
          }
        }

        .hamburger-icon {
          display: none;
        }

        .buttons-container {
          padding-right: 0;

          .buttons-list {
            gap: 40px;
            border-bottom: none;

            .nav-button {
              padding: 0;
              font-size: 0.875rem;
              line-height: 1.25rem;

              &.active {
                border-bottom: none;
              }
            }
          }
        }
      }
    }

    &.variation2 {
      display: block;
      width: 100vw;
      z-index: 997;

      .secondary-navbar {
        background-color: var(--tertiary-light-grey);
        padding: 0;
        position: static;
        width: initial;

        .logo-container.back-button {
          display: none;
        }

        .buttons-container {
          overflow-x: auto;
          -ms-overflow-style: none;
          display: flex;
          scrollbar-width: none;
          justify-content: unset;

          /* ios scroll fix */
          &::-webkit-scrollbar {
            display: none;
          }

          .buttons-list {
            flex-direction: row;
            gap: 56px;
            padding: 10px 56px;
            width: max-content;
            justify-content: space-evenly;
            flex: 1;

            .nav-button {
              padding: 0;
              width: unset;
              border-bottom: none;
            }
          }
        }
      }
    }
  }
}

html:has(meta[name="car-model-name"][content="victoris"]) {
  .secondary-navbar-container.variation1 .secondary-navbar .logo-container img,
  .secondary-navbar-container.variation2 .secondary-navbar .logo-container img {
    height: 15px;
    max-height: none;
    object-fit: unset;

    @media screen and (min-width: 1024px) {
      position: relative;
      top: 10px;
    }
  }
}