/**=====================
    Sidebar CSS Start
==========================**/
.page-wrapper {
  .page-body-wrapper {
    .sidebar {
      box-shadow: $sidebar-shadow;

      &:hover {
        .page-sidebar {
          .sidebar-menu {
            &::-webkit-scrollbar {
              width: 6px;
            }
          }
        }
      }
    }

    .page-sidebar {
      width: $sidebar-width;
      position: fixed;
      background-color: #202020;
      top: 0;
      height: calc(100vh);
      z-index: 9;
      border-radius: 0;
      background-size: 600%;
      background-position: 0 0;
      transition: all 0.3s ease;
      .sidebar-logo-box {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        box-shadow: -3px 1px 3px 1px rgba(68, 102, 242, 0.1);
        padding: $sidebar-menu-padding;
        .sidebar-button {
          background-color: rgba(221, 221, 221, 0.25);
          width: 26px;
          height: 26px;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 0 9px #2222222e;
          transition: all 0.4s ease-in-out;

          svg {
            transition: all 0.4s ease-in-out;
            height: auto;
            stroke: var(--primary-color);
          }
        }

        .main-header-left {
          display: inline-flex;
          width: 100%;
          align-items: center;
          background-color: $main-header-left-bg-color;
          z-index: $main-header-z-index;

          .logo-wrapper {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;

            a {
              width: max-content;
              display: flex;
              align-items: center;
              justify-content: space-between;

              img {
                height: 36px;
              }

              i {
                --Iconsax-Size: 18px;
                --Iconsax-Color: White;
              }

              &.favicon-img {
                display: none;
              }
            }

            .close-sidebar {
              color: $white;
              width: 22px;
              height: 22px;
              cursor: pointer;
              display: none;

              @media (max-width: 991px) {
                display: flex;
              }
            }
          }
        }
      }

      .sidebar-menu {
        list-style: $sidebar-menu-list-style;
        margin: $sidebar-menu-list-margin;
        padding: $sidebar-menu-padding;
        height: calc(100vh - #{$header-size});
        overflow: auto;
        display: flex;
        flex-direction: column;
        background: url("../images/sidebar-bg.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: bottom;

        &.custom-scrollbar {
          &::-webkit-scrollbar {
            width: 0;
            transition: 0.1s;
          }

          &::-webkit-scrollbar-track {
            -webkit-box-shadow: none;
          }

          &::-webkit-scrollbar-thumb {
            background-color: rgba(247, 247, 247, 0.3);
            border-radius: 100px;
          }
        }

        .sidebar-main-title {
          border-top: 1px solid rgba($sidebar-font-color, 0.15);
          margin-top: 12px;
          padding-top: 20px;
          padding-bottom: 10px;

          div {
            h6 {
              font-size: 14px;
              font-weight: 500;
              color: rgba($white, 0.8);
              text-transform: uppercase;
              margin-bottom: 0;
              letter-spacing: 0.75px;
            }
          }

          &:first-child {
            border-top: none;
            margin-top: 0;
            padding-top: 0;
          }

          &.pin-title {
            display: none;
            order: -1;
            border-top: 0;
            margin-top: 0;
            padding-top: 0;

            &.show {
              display: block;

              + .sidebar-main-title {
                border-top: 1px solid rgba($sidebar-font-color, 0.15);
                margin-top: 12px;
                padding-top: 20px;
              }
            }

            + .sidebar-main-title {
              border-top: 0;
              margin-top: 0;
              padding-top: 0;
            }
          }
        }

        li {
          width: 100%;
          position: relative;

          &:hover {
            .ri-pushpin-2-line,
            .ri-pushpin-2-fill {
              opacity: 1;
              visibility: visible;
            }
          }

          &.pined {
            order: -1;

            .ri-pushpin-2-line,
            .ri-pushpin-2-fill {
              opacity: 1;
              visibility: visible;
            }
          }

          .ri-pushpin-2-line,
          .ri-pushpin-2-fill {
            margin-left: auto;
            font-size: 17px;
            line-height: 1;
            opacity: 0;
            visibility: hidden;
            position: absolute;
            color: $white;
            top: 17px;
            z-index: 1;
            right: 20px;
            cursor: pointer;
          }

          .sidebar-header {
            font-size: $sidebar-font-size;
            letter-spacing: $sidebar-letter-spacing;
            padding: $sidebar-padding-top-bottom 0;
            text-transform: $sidebar-txt-transform;
            font-weight: $sidebar-font-weight;
            color: rgba($sidebar-font-color, 0.9);
            display: flex;
            align-items: center;
            position: relative;

            .stroke-icon {
              width: 18px;
              height: 18px;
              stroke: white;
              margin-left: auto;
              margin-right: 0;
              filter: invert(1) brightness(100);
              transition: all 0.25s ease;
            }

            .inactive-icon {
              margin-right: 8px;
              stroke-width: $sidebar-icon-stroke-width;
              vertical-align: text-bottom;
              width: 20px;
              height: 20px;
              filter: invert(1) brightness(100);
            }

            svg {
              margin-right: $sidebar-icon-margin;
              stroke-width: $sidebar-icon-stroke-width;
              vertical-align: text-bottom;
              width: 20px;
              height: 20px;
            }

            .active-icon {
              width: 20px;
              height: 20px;
            }

            &.active {
              .feather {
                display: none;
              }

              .active-icon {
                display: block;
              }
            }
          }

          .sidebar-submenu {
            display: none;
            transform-style: preserve-3d;
            transform: rotateX(-90deg);
            list-style: none;
            position: relative;

            &:before {
              content: "";
              width: 1px;
              height: 100%;
              background-color: rgba(247, 247, 247, 0.15);
              position: absolute;
              left: -13px;
              top: 50%;
              transform: translateY(-50%);
            }

            > li {
              padding-left: 6px;
              position: relative;

              .badge {
                margin-left: auto;
                background-color: rgba(247, 247, 247, 0.25);
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 0;
              }

              > a {
                padding: $sidebar-padding-top-bottom 0;
                font-size: 14px;
                color: rgba($sidebar-font-color, 0.5);
                transition: $sidebar-transition;
                text-transform: $sidebar-text-transform;
                position: relative;
                line-height: 2.5;
                letter-spacing: 0.7px;

                &:after {
                  content: "";
                  position: absolute;
                  top: 50%;
                  transform: translateY(-50%);
                  left: -21px;
                  width: 5px;
                  height: 5px;
                  border-radius: 100%;
                  background-color: #25384c;
                }

                &:hover {
                  color: $sidebar-font-color;
                  font-weight: 600;
                }

                &.active {
                  color: $sidebar-font-color;
                  font-weight: 600;

                  &:after {
                    content: "";
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: -21px;
                    width: 5px;
                    height: 5px;
                    border-radius: 100%;
                    background-color: #f7f7f7;
                  }

                  ~ .badge {
                    background-color: transparent;
                    z-index: 0;
                    overflow: hidden;

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

              &.active > a {
                color: $theme-body-font-color;

                &.active {
                  color: var(--primary-color);
                }
              }
            }

            &.menu-open {
              display: block;
              transform: rotateX(0deg);
              transform-origin: 10% 10%;
              transition: transform 0.3s, opacity 0.3s;
              transform-style: preserve-3d;
              margin-left: 23px;
              margin-top: 7px;
              margin-bottom: 10px;

              li {
                &.active {
                  .fa-angle-down {
                    &:before {
                      content: "\f104";
                      transition: $sidebar-transition;
                    }
                  }
                }
              }
            }
          }

          &.active {
            .stroke-icon {
              transform: rotate(90deg);
              transition: all 0.25s ease;
            }
          }
        }

        > li {
          &:has(> a.active) {
            margin-block: 3px;
          }

          > a {
            display: block;
            position: relative;
            transition: $sidebar-transition;

            span {
              line-height: 1.3;
              transform: translateX(0px);
              transition: all 0.3s ease;
              white-space: nowrap;
              opacity: 1;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              display: -webkit-box;
              overflow: hidden;
            }

            &:hover {
              span {
                transform: translateX(3px);
                transition: all 0.3s ease;
              }
            }
            &.active {
              z-index: 0;

              &::before {
                content: "";
                position: absolute;
                top: 0;
                left: -20px;
                z-index: -1;
                width: calc(100% - -40px);
                height: 100%;
                background: linear-gradient(90deg, rgba(221, 221, 221, 0.25) -20.65%, rgba(221, 221, 221, 0) 100%);
              }

              &::after {
                content: "";
                position: absolute;
                top: 50%;
                z-index: -1;
                left: -20px;
                transform: translateY(-50%);
                border-radius: 6px;
                height: 100%;
                width: 3px;
                background-color: var(--primary-color);
              }

              .without-active {
                display: none;
              }

              .inactive-icon {
                display: none;
              }

              .active-icon {
                display: none;
                filter: invert(1) brightness(100);
                margin-right: 8px;
              }
            }

            .active-icon {
              display: none;
            }

            i {
              --Iconsax-Size: 20px;
              --Iconsax-Color: White;
            }
          }
        }
      }

      ~ .page-body {
        margin-left: $sidebar-width;
        transition: $sidebar-transition;
      }
      &.open {
        display: block;
        width: 90px;
        .sidebar-logo-box {
          @media (min-width: 991.98px) {
            padding: 25px;
          }
          .sidebar-button {
            display: none;
          }
          .main-header-left {
            .logo-wrapper {
              @media (min-width: 991.98px) {
                display: block;

                .favicon-img {
                  width: auto;
                  height: auto;

                  img {
                    height: 40px;
                    width: 40px;
                  }
                }
              }

              .favicon-img {
                display: block;
              }

              .logo-img {
                display: none;
              }
            }
          }
        }
        .sidebar-menu {
          .sidebar-main-title {
            border-top: 1px solid rgba(247, 247, 247, 0.19);
            margin-top: 8px;
            padding-top: 8px;
            padding-bottom: 0;

            &:first-child {
              border-top: none;
              margin-top: 0;
              padding-top: 0;
            }

            div {
              display: none;
            }
          }

          li {
            &.pined {
              .ri-pushpin-2-line,
              .ri-pushpin-2-fill {
                top: 3px;
                right: 2px;
                font-size: 14px;
                width: auto;
                height: auto;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 100%;
                transform: rotate(45deg);
              }
            }

            .ri-pushpin-2-line,
            .ri-pushpin-2-fill {
              display: none;
            }

            > a {
              span {
                opacity: 0;
              }
            }

            .sidebar-header {
              text-align: center;
              padding-left: 14px;

              .stroke-icon {
                display: none;
              }
            }

            .sidebar-submenu {
              display: none;
            }
          }

          > li {
            &.active {
              .sidebar-submenu {
                height: 0;
                overflow: hidden;
                margin-block: 0;
              }
            }
          }
        }

        &:hover {
          width: $sidebar-width;
          .sidebar-logo-box {
            .sidebar-button {
              display: inline-flex;
            }
            .main-header-left {
              .logo-wrapper {
                @media (min-width: 991.98px) {
                  display: flex;

                  .favicon-img {
                    width: auto;
                    height: auto;

                    img {
                      height: auto;
                    }
                  }
                }

                .favicon-img {
                  display: none;
                }

                .logo-img {
                  display: flex;
                }
              }
            }
          }

          .sidebar-menu {
            .sidebar-main-title {
              border-top: 1px solid rgba(247, 247, 247, 0.15);
              margin-top: 12px;
              padding-top: 20px;
              padding-bottom: 10px;

              &.pin-title {
                &.show {
                  + .sidebar-main-title {
                    border-top: 1px solid rgba($sidebar-font-color, 0.15);
                    margin-top: 12px;
                    padding-top: 20px;
                  }
                }

                + .sidebar-main-title {
                  border-top: 0;
                  margin-top: 0;
                  padding-top: 0;
                }
              }

              div {
                display: block;
              }
            }

            li {
              &.pined {
                .ri-pushpin-2-line,
                .ri-pushpin-2-fill {
                  font-size: 17px;
                  line-height: 1;
                  opacity: 1;
                  visibility: visible;
                  position: absolute;
                  top: 17px;
                  z-index: 1;
                  right: 20px;
                  cursor: pointer;
                  transform: unset;
                  background-color: transparent;
                  width: auto;
                  height: auto;
                }
              }

              .ri-pushpin-2-line,
              .ri-pushpin-2-fill {
                display: block;
              }

              > a {
                span {
                  display: block;
                  opacity: 1;
                }
              }

              .sidebar-header {
                display: flex;
                align-items: center;
                position: relative;
                padding: 14px 0;
                text-align: unset;

                img {
                  margin: 0 8px 0 0;
                }

                .stroke-icon {
                  display: block;
                  margin: 0 0 0 auto;
                }
              }

              .sidebar-submenu {
                display: none;
              }
            }

            > li {
              &.active {
                .sidebar-submenu {
                  height: auto;
                  overflow: visible;
                  margin-top: 7px;
                  margin-bottom: 10px;
                }
              }
            }
          }
        }

        ~ .page-body {
          margin-left: 0;
          width: calc(100% - 90px);
          margin-left: auto;
          transition: $sidebar-transition;

          @media (max-width: 575.98px) {
            margin-left: 0;
          }

          .serviceman-location {
            left: 90px;
            width: calc(100% - 90px);

            > .position-relative {
              .service-list-box {
                &.show {
                  left: 90px;
                }
              }
            }

            @media (max-width: 991.98px) {
              width: 100%;
              left: 0;

              > .position-relative {
                .service-list-box {
                  &.show {
                    left: 0;
                  }
                }
              }
            }

            .toggle-menu {
              left: 110px;

              @media (max-width: 991.98px) {
                left: 20px;
              }
            }
          }
        }

        ~ footer {
          margin-left: auto;
          padding-right: 15px;
          width: calc(100% - 90px);

          @media (max-width: 767px) {
            margin-left: 0;
            width: 100%;
          }
        }
      }
    }

    .sidebar-close {
      .page-sidebar {
        transition: $sidebar-transition;
        transform: translate(-$sidebar-width);
      }

      .page-body {
        transition: $sidebar-transition;
        margin-left: 0 !important;
      }
    }
  }
}

/**=====================
    Sidebar CSS Ends
==========================**/