@import '../../variables.scss';
@import '@/styles/responsive.scss';

$min-scale: 0.8; // Scale for widths below 1280px
$max-scale: 1; // Scale for widths above 1920px

.dashboard_layout {
  display: flex;
  flex-direction: row;
  transition: zoom 0.3s ease; // Smooth zoom transition
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #f6f8fa;
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  // max-height: 100vh;
  // overflow-y: auto;

  &::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }

  .main_content {
    width: 100%;

    height: 100%;
    max-height: 95vh;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 0px;
      height: 0px;
    }

    // @media (min-width: 1200px) {
    //   margin-left: $sidebar_width;
    // }

    .main_header {
      padding: 40px;
      padding-bottom: 0;

      @media (max-width: 1399px) {
        // padding: 30px;
        padding: 0px 30px;
      }

      @media (max-width: 767px) {
        padding: 16px;
      }
    }

    .scroll_content {
      padding: 40px;
      padding-top: 0px;

      min-height: calc(100vh - 16vh);

      max-height: calc(100vh - 20vh);
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 0px;
        height: 0px;
      }

      & > * {
        position: relative;
        z-index: 2;
      }

      @include laptop {
        padding: 20px;
        padding-top: 10px;
      }

      @media (max-width: 767px) {
        padding: 16px;
      }
    }
  }

  // .guestHeader {
  //   // border: 1px solid red;
  //   padding: 10px 30px;
  //   display: flex;
  //   align-items: center;
  //   gap: 10px;
  //   justify-content: space-between;

  //   .inputDiv {
  //     width: 100%;
  //     max-width: 1250px;
  //     // border: 1px solid blue;

  //     .formgroup {
  //       display: block;
  //       margin: 0;
  //       margin-bottom: 16px;
  //       position: relative;

  //       .iconfield {
  //         position: relative;
  //         height: 100%;
  //         width: 100%;

  //         .icon {
  //           position: absolute;
  //           font-size: 18px;
  //           top: 50%;
  //           transform: translateY(-50%);
  //           left: 20px;
  //           color: $lightgrey;
  //           transition: all 0.3s;

  //           &.search {
  //             position: absolute;
  //             font-size: 18px;
  //             top: 50%;
  //             transform: translateY(-50%);
  //             left: 20px;
  //             color: #010c38;
  //             transition: all 0.3s;
  //           }
  //         }

  //         .formcontrol {
  //           padding-left: 60px;
  //           width: 100%;
  //           max-width: 1250px;
  //           height: 57px;
  //           border-radius: 25px;
  //           border: none;
  //           margin-top: 10px;

  //           &:focus {
  //             border: none;
  //             outline: none;
  //           }
  //         }
  //       }

  //       label {
  //         color: $lightblack;
  //         display: inline-block;
  //         margin: 0.3rem 0;
  //         font-weight: 600;
  //       }
  //     }
  //   }
  //   .createAccount {
  //     button {
  //       height: 52px;
  //       font-size: 16px;
  //     }
  //   }
  // }
  .userHeader {
    display: flex;
    // border: 1px solid red;
    // border-bottom: 1px solid #000000;
    position: relative;
    justify-content: space-around;
    padding: 20px 35px;
    // border: 1px solid red;
    width: 100%;
    min-height: 100px;

    &::after {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0.3;
      background-color: #bc996f;
      width: 95%;
      height: 1px;
      content: '';
    }

    @media (max-width: 700px) {
      flex-wrap: nowrap;
      justify-content: start;
    }

    .right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 25px;
      // border-bottom: 1px solid #000000;
      width: 100%;

      .cart {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        border: 1px solid #010c38;
        border-radius: 50%;
        padding: 15px;
        width: 45px;
        height: 45px;

        .count {
          display: flex;
          position: absolute;
          top: -5px;
          right: -10px;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          background-color: #010c38;
          width: 20px;
          height: 20px;
          color: $cartColor;
          font-size: 12px;
        }
      }

      .notification {
        position: relative;

        img {
          width: 45px;
          height: 45px;
          object-fit: contain;
        }
      }

      .profile {
        // border: 1px solid red;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;

        p {
          color: #010c38;
          font-weight: 500;
          font-size: 17px;
        }

        a {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 8px;
        }
      }
    }
  }

  .inputDiv {
    width: 100%;
    max-width: 1250px;
    // border: 1px solid blue;

    .formgroup {
      display: block;
      position: relative;
      margin: 0;
      margin-bottom: 16px;

      .iconfield {
        position: relative;
        width: 100%;
        height: 100%;

        .icon {
          position: absolute;
          top: 55%;
          left: 86px;
          transform: translateY(-50%);
          transition: all 0.3s;
          color: #8c8c8c;
          font-size: 18px;

          &.search {
            position: absolute;
            top: 50%;
            left: 20px;
            transform: translateY(-50%);
            transition: all 0.3s;
            outline: none !important;
            color: #010c38;
            font-size: 18px;

            &:focus {
              border: 1px solid #010c38;
            }
          }
        }

        .formcontrol {
          margin-top: 10px;
          margin-left: 70px;
          border: none;
          border-radius: 25px;
          padding-left: 60px;
          width: 100%;
          max-width: 1250px;
          height: 57px;
        }
      }

      label {
        display: inline-block;
        margin: 0.3rem 0;
        color: $lightblack;
        font-weight: 600;
      }
    }
  }
}