@use "/src/assets/scss/partial" as *;
@use "/src/assets/scss/variables" as *;

.HeaderWrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  z-index: 9;
  @media (min-width: $lg) {
    &::after{
      position: absolute;
      content: "";
      width: 125px;
      height: 125px;
      opacity: 20%;
      background-color: $primaryColor;
      border-radius: 100%;
      top: 0;
      left: 88%;
      z-index: -1;
      filter: blur(50px);
    }
  }
  @media (min-width: $xxl) {
    &::after{
      width: 135px;
      height: 135px;
      opacity: 22%;
      left: 100%;
    }
  }
  .LogoWrap {
    position: relative;
    display: flex;
    max-width: 135px;
    min-width: 135px;
    z-index: 1;

    @media (min-width: $lg) {
      max-width: 155px;
      min-width: 155px;
    }

    a {
      display: inline-block;
      padding: 0;
      width: 100%;

      img {
        width: 100%;
      }
    }
  }
  .PagelinksList {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    position: absolute;
    top: 100%;
    left: -200%;
    height: calc(100vh - 57px);
    transition: left 0.3s ease-in-out;
    background-color: $black;
    padding: 20px 20px 20px 20px;
    z-index: 0;
    width: calc(100% + 32px);
    border-top: 1px solid #ffffff38;

    &.SidebarOpen {
      position: absolute;
      left: -16px;
    }

    @media (min-width: $lg) {
      gap: 35px;
      border: none;
      align-items: center;
      flex-direction: row;
      height: auto;
      position: relative;
      left: inherit;
      top: inherit;
      background-color: transparent;
      padding: 0;
      width: auto;
      &.SidebarOpen {
        position: relative;
        left: inherit;
      }
    }
    @media (min-width: $xl) {
      gap: 40px;
    }
    @media (min-width: $xxl) {
      gap: 55px;
    }
    @media (min-width: $xxxl) {
      gap: 60px;
    }

    li {
      list-style-type: none;

      a {
        font-weight: $fw400;
        position: relative;
        display: inline-block;
        height: 100%;
        text-decoration: none;
        font-size: $fs16;
        transition: 0.3s all;
        color: $whiteColor;
        @media (min-width: $lg) {
          color: $black;
        }
        @media (min-width: $xxxl) {
          font-size: $fs18;
        }

        &::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: -1px;
          height: 1px;
          background-color: $primaryColor;
          width: 0px;
          transition: width 0.3s ease-in-out;
        }

        &:hover {
          &::after {
            width: 100%;
          }
        }

        &.active {
          &::after {
            width: 100%;
          }
        }
      }
    }
  }
  .HeaderButtonWrap {
    display: none;

    @media (min-width: $lg) {
      display: flex;
      align-items: center;
      justify-content: end;
      gap: 12px;
    }
  }
  .MenuIcon {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2px;
    max-width: 25px;
    min-width: 25px;
    height: 19px;
    cursor: pointer;

    span {
      display: block;
      width: 100%;
      height: 1px;
      background-color: $black;
      transition: 0.3s all;

      &:nth-child(1),
      &:nth-child(2),
      &:nth-child(3) {
        transform: rotate(180deg);
      }
    }

    &.Open {
      position: relative;

      span {
        &:nth-child(2) {
          position: absolute;
          transform: rotate(45deg);
          top: 8px;
          opacity: 0;
        }

        &:nth-child(1) {
          position: absolute;
          transform: rotate(45deg);
          top: 8px;
        }

        &:nth-child(3) {
          top: 8px;
          position: absolute;
          transform: rotate(-45deg);
        }
      }
    }

    @media (min-width: $lg) {
      display: none;
    }
  }

  .userDropdownWrapper {
    .userImage {
      width: 40px;
      height: 40px;
      @media (min-width: $md) {
        width: 50px;
        height: 50px;
      }
    }

    .userDropdownContent {
      background: $white;
      border: 1px solid #EAECF0;
      box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
      min-width: 240px;
      z-index: 2;
      opacity: 0;
      pointer-events: none;
      transition: 0.3s ease-in-out;

      &.active {
        opacity: 1;
        pointer-events: visible;
      }

      .dropdownItem {
        border-bottom: 1px solid #EAECF0;

        &.userDetails {
          .userimgbox {
            width: 40px;
            height: 40px;
            @media (min-width: $md) {
              width: 48px;
              height: 48px;
            }
          }

          .userContent {
            line-height: 1;

            .title {
              margin-bottom: 6px;
              color: $black28;
              line-height: 1.429;
            }

            .badge {
              background-color: $primaryColor;
              line-height: 1.167;
              padding: 4px 8px;
              color: $white;
            }
          }
        }

        &.switchToHost {
          span {
            color: $grey67;
          }

          .togglebtn {
            background-color: $bgColor;
          }
        }

        &.logoutBtn {
          a {
            color: $grey67;

            i {
              background-color: $grey67;
            }
          }
        }

        &.userDetails,
        &.logoutBtn a,
        &.switchToHost {
          padding: 11px 16px;
          min-height: 50px;
        }
      }
    }
  }
}