@use '../components/burger-btn';
@use '../utilities';

/* stylelint-disable selector-class-pattern */

.main-header {
  background-color: utilities.$background-dark;
  padding: utilities.space(4) 10%;
  backdrop-filter: blur(1rem);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transform: translateY(0);
  transition: transform 0.3s;
  color: utilities.$text-dark;

  &.hidden {
    transform: translateY(-100%);
  }

  .header__container {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .header__logo {
      height: 5rem;
      max-width: 18rem;

      a {
        width: 100%;
        height: 100%;

        img {
          object-fit: contain;
          width: 100%;
          height: 100%;
        }
      }
    }

    .header__infos {
      display: none;
    }

    .header__ctas {
      display: none;
    }

    .header__menu {
      position: absolute;
      width: 100%;
      height: calc(100vh - 9.4rem);
      top: 100%;
      left: -100%;
      z-index: 9999;
      transition:
        left 0.3s,
        background-color 0s;

      &.show {
        left: 0;
        background-color: rgb(0 0 0 / 60%);
        transition:
          left 0.3s,
          background-color 0.4s linear 0.3s;
      }

      .header__menu__content {
        background-color: utilities.$background-dark;
        max-width: 45rem;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: auto;
        scrollbar-width: thin;
      }

      .nav-primary__socials {
        display: flex;
        gap: utilities.space(2);
        justify-content: space-around;
        padding: utilities.space(2) utilities.space(4);

        a {
          color: utilities.$text-dark;

          &:hover {
            color: utilities.$primary-200;

            span {
              color: utilities.$primary-200;
            }
          }
        }
      }

      .nav-primary {
        padding-bottom: utilities.space(4);
      }

      #menu-header {
        display: flex;
        flex-direction: column;
        padding: 0 utilities.space(4);

        li {
          border-bottom: 1px solid utilities.$neutral-300;

          &:first-of-type {
            border-top: 1px solid utilities.$neutral-300;
          }

          &:last-of-type {
            border-bottom: unset;
          }

          a {
            width: 100%;
            padding: utilities.space(3) utilities.space(2);
            display: inline-flex;
            flex-direction: column;
            gap: utilities.space(1);
            align-items: flex-start;
            justify-content: flex-start;
            color: utilities.$text-primary;
            font-weight: 700;
            font-size: 1.6rem;
            text-align: center;
            font-family: utilities.$font-family-title;
            text-decoration: none;
            transition: color 0.3s ease;

            &:hover {
              color: utilities.$primary-300;

              span {
                color: utilities.$primary-300;
              }
            }

            span {
              font-size: 1.4rem;
            }
          }

          &.menu-item-has-children {
            cursor: pointer;

            > a {
              position: relative;
              padding-right: utilities.space(6);

              &::after {
                content: '';
                position: absolute;
                top: 50%;
                right: utilities.space(2);
                transform: translateY(-50%);
                width: 1.5rem;
                height: 1.5rem;
                background-image: url("data:image/svg+xml;utf8,<svg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12.5 4.03847L7 9.96155L1.5 4.03847' stroke='%23FF2EC8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
              }

              &:hover::after {
                background-image: url("data:image/svg+xml;utf8,<svg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12.5 4.03847L7 9.96155L1.5 4.03847' stroke='%23FF9FEC' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
              }
            }
          }

          ul {
            max-height: 0;
            overflow: hidden;
            padding-left: utilities.space(5);
            transition: max-height 0.3s ease;

            li {
              border-bottom: unset;

              a {
                color: utilities.$text-light;
                font-weight: 400;
              }

              &:first-of-type {
                border-top: unset;
              }
            }
          }

          &.is-open {
            > ul {
              max-height: 50rem;
            }
          }
        }
      }
    }
  }
}

@media screen and (width >= 1280px) {
  .main-header {
    .header__container {
      .header__logo {
        position: relative;
        max-width: unset;
        width: 20rem;

        a {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          display: block;
          width: 20rem;
          height: 10rem;
        }
      }

      justify-content: start;

      .header__infos {
        display: flex;
        align-items: center;

        span {
          color: utilities.$text-light;
          padding-left: utilities.space(8);
          position: relative;
          font-weight: 700;

          a {
            color: utilities.$text-light;
            font-weight: 700;
            transition: color 0.3s ease;
            text-decoration: none;

            &:hover {
              color: utilities.$primary-200;
            }
          }

          &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: utilities.space(4);
            transform: translate(-50%, -50%);
            width: 0.2rem;
            height: 100%;
            background-color: utilities.$primary;
          }
        }
      }

      .header__ctas {
        margin-left: auto;
        display: flex;
        gap: utilities.space(2);
        margin-right: auto;
      }
    }
  }
}