@use '/src/components/config' as *;

.general-wrapper {

  .middle-container-wrapper {
    .middle-child-container {
      position: relative;
      display: flex;
      color: #121116;
      line-height: 1.5;

      &.showMenu {
        .current-tab-lists {
          max-width: 4.125rem;

          .brand {

            img {
              width: 3.15rem !important; // To overwrite img width for small menu 
            }

          }

          .menu-coll-btn {
            span {
              transform: rotate(180deg);
            }
          }
        }
      }

      .current-tab-lists {
        display: flex;
        flex-direction: column;
        max-width: 16rem;
        width: 100%;

        .brand {
          width: fit-content;

          img.logo {
            padding: 1.25rem;
            width: 10.25rem;
          }

          .logo-small {
            display: none; // Hide for desktop
          }

          p {
            text-align: end;
            margin: 0;
          }
        }

        .current-tab-lists-container {
          position: relative;

          a,
          .menu-coll-btn {
            position: relative;
            padding: 1rem 0.63rem 1.125rem 1.25rem;
            border-top: 0.063rem solid #e0e4e9;
            border-left: 0.125rem solid transparent;
            overflow: hidden;
            transition: all 100ms ease-out;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            color: #000;
            gap: 0.75rem;
            background-color: transparent;

            .menu-name {
              font-size: 0.8125rem;
              line-height: 1.4615384615;
              font-weight: 500;
              color: #121116;
            }

            .admin-pro-tag{
              top: 1rem;
            }

            .menu-desc {
              margin-top: 0.188rem;
              color: #72777c;
              line-height: 1.2307692308;
              transition: all 150ms ease-out;
              -webkit-transition: all 150ms ease-out;
            }

            .drop-down-section {
              display: flex;
              justify-content: space-between;
              align-items: center;
              gap: 0.25rem;
              width: 100%;
            }

            &:hover {
              background: $color-white;
              border-left: 0.126rem solid $color-active !important; // To overwrite default common.scss
            }

            &:focus {
              box-shadow: none;
            }

            &:hover {
              color: $color-active;
            }

            i {
              font-size: 1.75rem;
              color: #72777c;
              font-size: 1.4375rem;
              line-height: 1;
              opacity: .3;
            }
          }

          .menu-coll-btn {
            font-size: 0.8125rem;
            font-weight: 500;
            border-radius: 0; // To overwrite common btn style

            i {
              font-size: 1.25rem;
            }
          }

          .active-current-tab {
            color: $color-active;
            background: $color-white;
            border-left: 0.126rem solid $color-active;

            .menu-name,
            i {
              color: $color-active;
            }

            i {
              opacity: 1;
            }

            .admin-pro-tag{
              top:1rem;
            }
          }

          .menu-close {
            position: absolute;
            width: 2.25rem;
            height: 2.25rem;
            top: 1.25rem;
            font-size: 1.15rem;
            right: 0.63rem;
            border-radius: 0.5rem;
            background-color: $color-white;
            color: $color-active;
            border: none;
            outline: none;
            align-items: center;
            justify-content: center;
          }

          .tab-wrapper {
            width: 100%;

            .subtab-wrapper {
              padding-left: 1rem;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              position: relative;
              max-height: 0;
              overflow: hidden;
              transition: max-height 0.3s linear;

              a {
                width: 100%;
                box-sizing: border-box;
              }

              &.active {
                max-height: 50rem;
                height: auto;
              }
            }
          }
        }
      }

      .tab-content {
        position: relative;
        background: $color-white;
        width: 100%;

        .tab-description-start {
          padding: 1.8rem 1.8rem 0;

          .child {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 1rem;
            border-bottom: 0.063rem solid #e0e4e9;
            font-size: 0.875rem;
            line-height: 1.5714285714;
            padding: 0 0 1.875rem;

            .tab-name {
              line-height: normal;
              font-size: 1.625rem;
              line-height: 1;
              font-weight: 500;
              letter-spacing: .0.045rem;
            }

            .tab-desc {
              margin-top: 0.5rem;
            }

            p {
              position: relative;
              margin: 0;

              &::after {
                position: absolute;
                content: "";
                bottom: -2.45rem; // For header icon bottom style
                left: 0;
                background: $color-active;
                width: 100%;
                height: 0.125rem;
              }

              i {
                width: 3rem;
                height: 3rem;
                background: $menu-color;
                color: $color-active;
                border-radius: 0.188rem;
                font-size: 2rem;
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 50.211rem) {
  .general-wrapper {
    .middle-container-wrapper {
      .middle-child-container {
        .current-tab-lists {
          max-width: 4.125rem;

          .brand {

            img.logo {
              display: none; // Hide for responsive
            }

            .logo-small {
              display: block;
              width: 3.125rem;
              padding: 0.5rem;
            }

            p {
              display: none; // Hide for responsive
            }
          }

          .current-tab-lists-container {
            .menu-coll-btn {
              display: none; // Hide for responsive
            }

            .tab-wrapper {
              .subtab-wrapper {
                padding-left: 0;
              }
            }

            a {
              div {
                &:nth-child(2) {
                  display: none; // Hide for responsive
                }
              }
            }
          }
        }
      }
    }
  }
}