@use "../abstracts/" as *;

.header {
  max-width: 100%;
  width: 100%;
  padding-block: 20px;
  transition: padding 0.2s ease-in-out;
  background-color: $topbar-bg;
  border-bottom: 1px solid $border-ternary;
  position: sticky;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 200;
  @include md-down {
    padding-block: 20px;
  }
  &.sticky {
    padding-block: 15px;
  }
  @at-root {
    .header-wrapper {
      @include flex($align: center, $justify: space-between, $gap: 70px);
      @include xl-down {
        gap: 35px;
      }
      @include lg {
        gap: 20px;
      }
      @at-root {
        .header-left {
          @include flex($align: center, $gap: 10px);
          .logo-wrapper {
            max-width: 160px;
          }
        }

        .header-middle {
          .sidebar {
            transition: unset;
            @include lg-down {
              position: fixed;
              max-width: 280px;
              width: 100%;
              height: 100%;
              min-height: 100dvh;
              inset-block-start: 0;
              inset-block-end: 0;
              inset-inline-start: 0;
              z-index: 300;
              background: $color-white;
              transition: transform 0.3s;
              transform: translateX(-105%);
            }
            .sidebar-logo {
              @include lg-up {
                display: none;
              }
              @include lg-down {
                padding: 20px 20px 15px;
              }
            }
            .sidebar-menu-wrapper {
              @include lg-down {
                max-height: calc(100dvh - 75px);
                height: 100%;
                overflow-y: auto;
                overflow-x: hidden;
                padding: 20px;
              }
              > nav {
                > ul {
                  @include flex($align: center);
                  @include lg-up {
                    @include flex($align: center, $gap: 45px);
                  }
                  @include lg {
                    gap: 20px;
                  }
                  @include lg-down {
                    @include flex(
                      $align: flex-start,
                      $direction: column,
                      $gap: 0
                    );
                  }
                  li {
                    @include lg-down {
                      width: 100%;
                    }
                    > .menu-link {
                      color: $text-primary;
                      font-size: 16px;
                      transition: 0.3s ease-in-out;
                      @include flex($align: center, $gap: 10px);
                      line-height: 1;
                      padding-block: 15px;
                      @include lg-up {
                        &:hover + .mega-menu {
                          transform: none;
                          z-index: 200;
                          transform: none;
                          visibility: visible;
                          opacity: 1;
                        }
                      }
                      > span {
                        font-size: 14px;
                        &:is(.rotate-180) {
                          rotate: 180deg;
                        }
                      }
                      &.active {
                        color: $color-primary;
                      }
                      &:hover {
                        color: $color-primary;
                      }

                      @include lg-down {
                        justify-content: space-between;
                        width: 100%;
                        font-weight: 400;
                      }
                    }

                    @at-root {
                      .mega-menu {
                        @include lg-up {
                          width: 682px;
                          position: absolute;
                          left: 50%;
                          top: calc(100% + 15px);
                          transform: translateX(-50%) !important;
                          z-index: 1;
                          opacity: 0;
                          visibility: hidden;
                          transform-origin: 50% -50px;
                          transform: perspective(400px) rotateX(-10deg);
                          transition: all cubic-bezier(0.645, 0.045, 0.355, 1)
                            0.25s;
                          transition-property: transform, opacity, visibility;
                        }

                        @include lg-down {
                          display: grid;
                          grid-template-rows: 0fr;
                          transition: grid-template-rows 0.3s ease-out;
                          &:is(.show) {
                            grid-template-rows: 1fr;
                          }
                        }

                        @at-root {
                          .mega-menu-wrapper {
                            @include lg-down {
                              overflow: hidden;
                            }
                            .mega-menu-inner {
                              background-color: $site-bg;
                              border-end-start-radius: $radius-28;
                              border-end-end-radius: $radius-28;
                              padding: 35px;
                              overflow: hidden;
                              @include lg-up {
                                box-shadow: 0 20px 32px -8px rgba(17, 16, 19, 0.15),
                                  0 0 1px rgba(17, 16, 19, 0.05);
                              }
                              @include lg-down {
                                padding: 15px;
                                border-radius: 0;
                              }

                              .maga-menu-left {
                                @include lg-up{
                                  padding-inline-end: 30px;
                                  border-inline-end: 1px solid
                                    rgba(103, 116, 137, 0.16);
                                }  
                                > h5 {
                                  font-size: 18px;
                                  margin-bottom: 20px;
                                  letter-spacing: 0.5px;
                                }
                                .menu-feature {
                                  @include flex(
                                    $align: start,
                                    $direction: column,
                                    $gap: 15px
                                  );
                                  .menu-feature-item {
                                    @include flex($align: start, $gap: 15px);
                                    border: 1px solid rgba(103, 116, 137, 0.16);
                                    padding: 15px 15px 10px;
                                    border-radius: $radius-12;
                                    transition: border-color 0.3s ease-in-out;
                                    background: transparent;
                                    &:hover {
                                      border-color: $color-primary;
                                      .menu-feature-icon {
                                        color: $color-primary;
                                      }
                                      .menu-feature-content > h6 {
                                        color: $color-primary;
                                      }
                                    }
                                    &:is(.active) {
                                      border-color: $color-primary;
                                      .menu-feature-icon {
                                        color: $color-primary;
                                      }
                                      .menu-feature-content > h6 {
                                        color: $color-primary;
                                      }
                                    }
                                    .menu-feature-icon {
                                      font-size: 20px;
                                      flex-shrink: 0;
                                      line-height: 1;
                                      color: $text-primary;
                                      transition: color 0.3s ease-in-out;
                                    }

                                    .menu-feature-content {
                                      color: $text-primary;
                                      text-align: start;
                                      > h6 {
                                        font-size: 17px;
                                        transition: color 0.3s ease-in-out;
                                      }

                                      > p {
                                        font-size: 15px;
                                        margin-top: 4px;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        display: -webkit-box;
                                        -webkit-line-clamp: 2;
                                        line-clamp: 2;
                                        -webkit-box-orient: vertical;
                                      }
                                    }
                                  }
                                }
                              }

                              @at-root {
                                .mega-menu-right {
                                  @include lg-up {
                                    padding-inline-start: 30px;
                                  }
                                  @include lg-down {
                                    border-block-start: 1px solid
                                      rgba(103, 116, 137, 0.16);
                                    padding-block-start: 35px;
                                  }
                                  .mega-menu-banner {
                                    position: relative;
                                    .menu-banner-shape {
                                      position: absolute;
                                      inset-inline-end: -15px;
                                      inset-block-start: -15px;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                        &:hover {
                          visibility: visible;
                          opacity: 1;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }

        .header-right {
          @include flex($align: center, $gap: 15px);
          [data-bs-theme=dark] & .icon-btn.dark-soft {
              background-color: rgb(255 255 255 / 30%);
              color: #f1f1f1;
              &:hover{
                color: #f1f1f1 !important;
                background-color: rgb(255 255 255 / 30%) !important;
              } 
          }
        

          .lang-dropdown {
            .dropdown-toggle::after {
                display: none;
            }

            .flag-img {
              @include square($size: 24px, $radius: 50%);
              overflow: hidden;
              > img {
                width: 100%;
                height: 100%;
              }
            }

            .dropdown-menu {
              border-color: $border-ternary;
              padding: 0.5rem;
              ul {
                li {
                  a {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    gap: 8px;
                    padding: 10px 15px;
                    color: $text-primary;
                    font-size: 14px;
                    border-radius: $radius-4;
                    cursor: pointer;
                    &:hover {
                      background-color: $color-gray-1;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}