@layer components {
  .seller-wrapper {
    .basic-wizard {
      .stepper-horizontal {
        .step {
          .step-title {
            @apply max-w-full h-auto overflow-hidden text-ellipsis whitespace-normal w-[calc(78px_+_(180_-_78)_*_((100vw_-_320px)_/_(1920_-_320)))];
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .product-date {
            input {
              @apply text-sm;
            }
          }
        }
      }
    }
    .card-header {
      @apply flex-wrap gap-3 rounded-[15px];
    }
    .common-f-start {
      @apply gap-[calc(14px_+_(20_-_14)_*_((100vw_-_320px)_/_(1920_-_320)))] flex-wrap;
      .seller-filter {
        @apply cursor-pointer font-medium text-base transition-all duration-[0.5s] ease-[ease-in-out] relative left-0 after:content-[""] after:absolute after:bg-[rgba(var(--theme-default),1)] after:opacity-30 after:transition-all after:duration-[0.3s] after:ease-[ease-in-out] after:rounded-[50px] after:left-0 after:-bottom-px;
        &::after {
          @apply w-[0] h-[3px];
          -webkit-transition: all 0.3s ease-in-out;
        }
        &:hover,
        &:active,
        &.active {
          @apply text-[rgba(var(--theme-default),1)] transition-all duration-[0.5s] ease-[ease-in-out];

          &::after {
            @apply w-6/12;
          }
        }
      }
    }
    .modal {
      .modal-body {
        .form-select {
          @apply text-sm font-normal text-[rgba(var(--lighter-gray),1)];
        }
      }
    }

    .form-check {
      .form-check-input {
        &:checked {
          @apply bg-[rgba(var(--theme-default),1)];
        }

        &:valid {
          @apply border-[rgba(var(--theme-default),1)];

          ~ .form-check-label {
            @apply text-[rgba(var(--theme-font-color),1)];
          }
        }
      }
    }
    .seller-filter {
      @apply cursor-pointer font-medium text-base transition-all duration-[0.5s] ease-[ease-in-out] relative left-0 after:content-[""] after:absolute after:bg-[rgba(var(--theme-default),1)] after:opacity-30 after:transition-all after:duration-[0.3s] after:ease-[ease-in-out] after:rounded-[50px] after:left-0 after:-bottom-px;

      &::after {
        @apply w-[0] h-[3px];
        -webkit-transition: all 0.3s ease-in-out;
      }

      &:hover,
      &:active,
      &.active {
        @apply text-[rgba(var(--theme-default),1)] transition-all duration-[0.5s] ease-[ease-in-out];

        &::after {
          @apply w-6/12;
        }
      }
    }
    .right-vendor {
      @apply gap-3 flex-wrap flex justify-end items-center;

      .input-group {
        @apply w-3/5;

        svg {
          @apply w-[18px] h-[18px];
        }
      }
    }
    .basic-wizard {
      .custom-input {
        input {
          &::placeholder {
            @apply text-[rgba(var(--theme-font-color),0.8)];
          }
        }
        .form-control[type="file"] {
          @apply text-[rgba(var(--font-gray-color),1)] file:text-[rgba(var(--font-gray-color),1)];
        }

        .flatpicker-calender {
          .form-control {
            @apply text-[rgba(var(--font-gray-color),1)];
          }
        }
      }

      .stepper-horizontal {
        .step {
          .step-bar-left {
            @apply border-[rgba(var(--gray-60),1)] h-0.5 border-[0.0625rem_0];
          }

          .step-bar-right {
            @apply h-0.5 border-[0.0625rem_0];
          }
        }

        .step-circle {
          @apply font-medium;

          span {
            @apply leading-none font-normal text-sm;
          }
        }
      }

      .wizard-footer {
        @apply mt-4;

        [class*="button-light-"] {
          &:disabled {
            @apply border-[rgba(var(--transparent-color),1)] text-[rgba(var(--badge-light-color),1)] opacity-100;
          }
        }
      }
      .modal {
        .modal-body {
          .form-select {
            @apply text-sm font-normal text-[rgba(var(--lighter-gray),1)];
          }
        }
      }

      .form-check {
        .form-check-input {
          &:checked {
            @apply bg-[rgba(var(--theme-default),1)];
          }

          &:valid {
            @apply border-[rgba(var(--theme-default),1)];

            ~ .form-check-label {
              @apply text-[rgba(var(--theme-font-color),1)];
            }
          }
        }
      }
    }
  }
  .seller-cards {
    @apply grid place-content-center grid-cols-[1fr_1fr_1fr_1fr_1fr] gap-5 pb-5;
    .seller-box {
      @apply p-5 rounded-[15px] bg-[rgba(var(--white-bg),1)];

      > div {
        @apply flex items-center gap-3 mb-[22px];
      }

      .seller-profits {
        li {
          padding-block: 6px;
          &:first-child {
            @apply pt-0;
          }

          &:last-child {
            @apply pb-0;
          }

          .common-space {
            @apply relative z-0 before:content-[""] before:absolute before:-translate-y-2/4 before:w-full before:border-t-[rgba(var(--chart-dashed-border),1)] before:z-[-1] before:border-t before:border-dashed before:top-2/4;

            span {
              @apply bg-[rgba(var(--white-bg),1)] first:pr-1.5 last:font-medium last:pl-1.5;
            }
          }
        }
      }

      svg {
        width: calc(28px + (34 - 28) * ((100vw - 320px) / (1920 - 320)));
        height: calc(28px + (34 - 28) * ((100vw - 320px) / (1920 - 320)));
      }

      .btn {
        @apply w-full block text-[rgba(var(--white),1)] text-center mt-[22px];
      }
    }
    .hide {
      @apply animate-[hide_0.3s_ease_0s_1_normal_forwards] origin-center;
    }

    .show {
      @apply animate-[show_0.3s_ease_0s_1_normal_forwards] origin-center;
    }
  }
  .review-box {
    .seller-profile {
      .accordion-button {
        @apply text-[calc(16px_+_(18_-_16)_*_((100vw_-_320px)_/_(1920_-_320)))] text-[rgba(var(--theme-font-color),1)] font-medium tracking-[0.2px] bg-[#e2e3e8] w-full border border-[rgba(var(--badge-light-color),0.05)] text-start px-5 py-4 border-solid;
        &.collapsed {
          @apply bg-[rgba(var(--white),1)];
        }
      }
      .accordion-item {
        @apply mb-3;
        .accordion-header {
          .accordion-button {
            &::after {
              @apply bg-[image:var(--bs-accordion-btn-icon)] bg-[16px];
            }
          }
        }
        .accordion-body {
          @apply bg-[rgba(var(--white),1)] border border-[rgba(var(--badge-light-color),0.1)] p-4 border-solid;
        }
        .accordion-body {
          .common-space,
          .common-f-start {
            @apply gap-2.5;
            h5 {
              @apply text-[calc(_16px_+_(17_-_16)_*_((100vw_-_320px)_/_(1920_-_320))_)];
            }

            i {
              @apply text-base;
            }

            svg {
              width: calc(28px + (40 - 28) * ((100vw - 320px) / (1920 - 320)));
              height: calc(28px + (40 - 28) * ((100vw - 320px) / (1920 - 320)));
            }
          }
          .seller-details {
            @apply !mt-5;

            li {
              @apply gap-1 flex-wrap pb-3 flex justify-between items-center;

              > div {
                @apply gap-2.5 flex justify-start items-center;

                i {
                  @apply text-sm text-[rgba(var(--theme-body-font-color),0.8)];
                }

                h6 {
                  @apply text-[rgba(var(--theme-body-font-color),1)] text-[15px] font-normal;
                }
              }
            }
          }
          .notification-wrapper {
            @apply pb-4;

            .form-check-label {
              @apply tracking-[0.3px];
            }
          }
          .checkbox-wrapper {
            li {
              @apply max-w-[45px] bg-[rgba(var(--badge-light-color),0.1)] grid place-items-center;

              width: calc(38px + (45 - 38) * ((100vw - 320px) / (1920 - 320)));
              height: calc(38px + (45 - 38) * ((100vw - 320px) / (1920 - 320)));

              .form-check-input {
                @apply bg-[unset] z-0 appearance-none transition-all duration-[0.2s] !h-full ease-[ease-in-out];

                &:checked {
                  @apply bg-[rgba(var(--theme-default),1)] !h-full;

                  ~ .form-check-label {
                    i {
                      @apply transition-all duration-[0.2s] ease-[ease-in-out] text-[rgba(var(--white),1)] scale-[1.2];
                    }
                  }
                }
                &::after {
                  content: none;
                }
              }

              .form-check-label {
                @apply z-[1];

                i {
                  @apply text-[rgba(var(--badge-light-color),1)] text-[calc(_14px_+_(16_-_14)_*_((100vw_-_320px)_/_(1920_-_320))_)] pr-0 leading-[1];
                }
              }
            }
          }
          .policies-wrapper {
            li {
              @apply pb-4;

              label {
                @apply font-medium text-[rgba(var(--badge-light-color),1)];
              }

              p {
                @apply leading-[1.6] m-0 max-w-full h-auto overflow-hidden text-ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
              }

              a {
                @apply text-[rgba(var(--theme-default),1)] hover:underline;
                text-decoration: unset;
              }

              .ql-tooltip {
                @apply invisible;
              }
            }
          }
        }
      }
      .product-reviews {
        .review-people {
          .review-list {
            @apply max-h-[295px];

            li {
              @apply bg-[rgba(var(--light-background),1)] px-5 py-4 rounded-[10px];

              .people-box {
                @apply p-0 rounded-none;
                background: unset;

                .people-name {
                  @apply flex-wrap gap-0;

                  .date-time {
                    @apply flex-wrap gap-1;
                  }
                }
              }

              > p {
                @apply leading-[1.6] max-w-full h-auto overflow-hidden text-ellipsis;
                margin: calc(8px + (12 - 8) * ((100vw - 320px) / (1920 - 320)))
                  0 0 0;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
              }
            }
          }
        }
      }
      .notification-wrapper {
        .checkbox {
          label {
            @apply pl-[30px] before:ml-0;
          }
        }
        .checkbox input[type="checkbox"] {
          @apply hidden;
        }
      }
    }
  }
  .seller-details-table {
    .recent-table {
      div.dt-container {
        .dt-layout-row {
          .dt-search {
            @apply right-[183px] top-5;

            .dt-input {
              @apply w-auto;
            }
          }

          .dt-length {
            @apply top-[19px];
          }
        }
      }

      .table {
        thead,
        tbody {
          tr {
            th,
            td {
              @apply text-[rgba(var(--body-font-color),1)] min-w-[auto];

              &:first-child {
                @apply pl-5;
              }

              &:last-child {
                @apply pr-5;
              }

              .badge {
                @apply text-xs px-3 py-1.5;
              }

              .product-names {
                p {
                  @apply overflow-hidden text-ellipsis whitespace-nowrap w-40 min-w-[228px] max-w-[228px];
                }
              }

              .product-action {
                @apply flex items-center justify-start gap-2;

                .square-white {
                  @apply w-[34px] h-[34px] bg-[rgba(var(--white),1)] flex justify-center items-center shadow-[0px_0px_28px_6px_rgba(235,235,235,0.4)] rounded-sm;

                  svg {
                    @apply w-[16px] h-[16px] fill-[rgba(var(--badge-light-color),0.8)];
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .vendor-selling-table {
    .recent-table {
      div.dt-container {
        .dt-layout-row {
          .dt-search {
            @apply right-5;

            .dt-input {
              @apply w-auto;
            }
          }

          .dt-length {
            @apply top-4;
          }
        }
      }

      .table {
        thead,
        tbody {
          tr {
            th,
            td {
              @apply text-[rgba(var(--body-font-color),1)] min-w-[auto];

              &:first-child {
                @apply pl-5;
              }

              &:last-child {
                @apply pr-5;
              }

              .product-names {
                p {
                  @apply overflow-hidden text-ellipsis whitespace-nowrap w-40 min-w-[228px] max-w-[228px];
                }
              }
            }
          }
        }
      }
    }
  }
  .seller-order-table {
    .recent-table {
      div.dt-container {
        .dt-layout-row {
          .dt-search {
            @apply right-5;

            .dt-input {
              @apply w-auto;
            }
          }

          .dt-length {
            @apply top-4;
          }
        }
      }

      .table {
        thead,
        tbody {
          tr {
            th,
            td {
              @apply text-[rgba(var(--body-font-color),1)] min-w-[auto];

              &:first-child {
                @apply pl-5;
              }

              &:last-child {
                @apply pr-5;
              }

              a {
                @apply text-[rgba(var(--badge-light-color),1)];
              }

              &:nth-child(2) {
                a {
                  @apply !text-[rgba(var(--theme-default),1)] font-medium;
                }
              }

              &:nth-child(4) {
                img {
                  @apply h-[30px];
                }

                a {
                  @apply text-[rgba(var(--badge-light-color),1)] overflow-hidden text-ellipsis whitespace-nowrap w-40 min-w-[120px] max-w-[120px];
                }
              }

              .badge {
                @apply text-xs px-3 py-1.5;
              }
            }
          }
        }

        tbody {
          tr {
            td {
              &:last-child {
                @apply pl-6;
              }
            }
          }
        }
      }
    }
  }
  .seller-details-wrapper {
    .review-box {
      .md-sidebar {
        .email-left-aside {
          .card {
            @apply bg-transparent shadow-none;
            .card-body {
              @apply p-0;
            }
          }
          .collapse {
            visibility: unset;
          }
        }
      }
    }
    .widget-hover {
      .card-body {
        > div {
          span {
            overflow: unset;
          }
        }
      }
      &:hover {
        svg {
          animation: tada 1.5s ease infinite;
        }
      }
    }
    .social-tabs {
      .tab-links {
        .frame-image {
          svg {
            @apply w-[18px] h-[18px];
          }
        }
      }
    }
  }

  @keyframes hide {
    0% {
      transform: scale(1);
    }

    100% {
      transform: scale(0);
      width: 0;
      height: 0;
      margin: 0;
    }
  }

  @keyframes show {
    0% {
      transform: scale(0);
      width: 0;
      height: 0;
      margin: 0;
    }

    100% {
      transform: scale(1);
      height: auto;
      width: auto;
    }
  }
  @screen sm {
    .seller-wrapper {
      .common-f-start {
        @apply flex-col items-start;
      }
      .card-header {
        @apply flex-col items-start;
      }
    }
  }
  @screen between1660-1400 {
    .seller-cards {
      @apply grid-cols-[1fr_1fr_1fr_1fr];
    }
  }
  @screen between1399-768 {
    .seller-cards {
      @apply grid-cols-[1fr_1fr_1fr];
    }
  }

  @screen sm {
    .seller-cards {
      @apply grid-cols-[1fr];
    }
  }
  @screen md640 {
    .seller-details-table {
      .recent-table {
        div.dt-container {
          .dt-layout-row {
            .dt-search {
              @apply top-0;
            }
          }
        }
      }
    }
  }
  @screen md640 {
    .vendor-selling-table {
      .recent-table {
        div.dt-container {
          .dt-layout-row {
            .dt-search {
              @apply top-1;
            }
          }
        }
      }
    }
  }
  @screen md640 {
    .seller-order-table {
      .recent-table {
        div.dt-container {
          .dt-layout-row {
            .dt-search {
              @apply top-1;
            }
          }
        }
      }
    }
  }
  @screen xl {
    .seller-order-table {
      .recent-table {
        .table {
          thead,
          tbody {
            tr {
              th,
              td {
                &:nth-child(2) {
                  @apply min-w-[128px];
                }

                &:nth-child(3) {
                  @apply min-w-[110px];
                }

                &:nth-child(4) {
                  @apply min-w-[165px];
                }

                &:nth-child(5) {
                  @apply min-w-[68px];
                }

                &:nth-child(6) {
                  @apply min-w-[80px];
                }
              }
            }
          }
        }
      }
    }
    .seller-details-table {
      .recent-table {
        .table {
          thead,
          tbody {
            tr {
              th,
              td {
                &:nth-child(6) {
                  @apply min-w-[98px];
                }
              }
            }
          }
        }
      }
    }
    .vendor-selling-table {
      .recent-table {
        .table {
          tbody {
            tr {
              th,
              td {
                /* @apply min-w-[118px]; */
              }
            }
          }
        }
      }
    }
  }
  @screen xl1660 {
    .ord-xxl-1 {
      @apply order-1;
    }
    .ord-xxl-2 {
      @apply order-2;
    }
    .ord-xxl-3 {
      @apply order-3;
    }
    .seller-details-wrapper {
      .review-box {
        .md-sidebar {
          .accordion {
            .accordion-item {
              @apply mb-0;
            }
          }
          .md-sidebar-toggle {
            @apply block w-fit capitalize mb-5;
          }
          .md-sidebar-aside {
            @apply absolute opacity-0 invisible z-[3] w-[360px] transition-all duration-[0.2s] ease-[ease] left-0 top-10;
            &.open {
              @apply opacity-100 visible transition-all duration-[0.2s] ease-[ease];
            }
          }
        }
      }
    }
  }
}