/* Items */
.item {
  &-one {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: toRem(40);
    height: toRem(40);
    border: 0;
    border-radius: 50%;
    background-color: $white;
    .notify_no {
      position: absolute;
      top: calc(-1 * toRem(9));
      right: calc(-1 * toRem(3));
      width: toRem(18);
      height: toRem(18);
      border-radius: 50%;
      background-color: $main-color;
      display: flex;
      justify-content: center;
      align-items: center;
      @include fontFamily(12, $fw_medium, 15, $white);
    }
    &.dropdown-toggle {
      &::after {
        display: none;
      }
    }
  }
}
/* Dropdown */
.notifyDropdown {
  .dropdown-menu {
    min-width: toRem(345);
    max-width: toRem(345);
    padding: toRem(20) 0;
    background-color: $white;
    border: toRem(1) solid $stroke-2-color;
    border-radius: toRem(12);
    transform: translate3d(0, toRem(60), 0);
    &.show {
      top: 15% !important;
    }
    > * {
      padding-left: toRem(15);
      padding-right: toRem(15);
    }
    @media screen and (max-width: 575px) {
      min-width: toRem(290);
      max-width: toRem(290);
      padding: toRem(10) 0 toRem(20);
      > * {
        padding-left: toRem(10);
        padding-right: toRem(10);
      }
    }
    @media screen and (max-width: 450px) {
      min-width: toRem(270);
      max-width: toRem(270);
    }
  }
}
.notify-list {
  max-height: toRem(288);
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  &::-webkit-scrollbar {
    width: toRem(6);
  }
  &::-webkit-scrollbar-track {
    background: $scroll-track;
    border-radius: toRem(50);
  }
  &::-webkit-scrollbar-thumb {
    background: $scroll-thumb;
    border-radius: toRem(50);
  }
  li {
    padding: toRem(20) 0;
    border-bottom: toRem(1) solid $stroke-2-color;
    &:last-child {
      padding-bottom: 0;
      border-bottom: none;
    }
  }
}
.notify-list-details {
  li {
    padding: toRem(20) 0;
    border-bottom: toRem(1) solid $stroke-2-color;
    &:last-child {
      padding-bottom: 0;
      border-bottom: none;
    }
  }
}
.headerUserDropdown {
  .dropdown-toggle {
    &::after {
      display: none;
    }
  }
  .dropdown-menu {
    background-color: $white;
    border: toRem(1) solid $color3;
    border-radius: toRem(12);
    transform: translateY(toRem(60));
    &.show {
      top: 15% !important;
    }
  }
  &.lanDropdown {
    .dropdown-toggle {
      > div {
        &:last-child {
          display: none !important;
        }
      }
      &::after {
        display: none;
      }
      ~ .dropdown-menu {
        --bs-position: end;
      }
    }
  }
}
.dropdownItem {
  &-one {
    padding: toRem(8) toRem(9) !important;
    background-color: $white !important;
    border: toRem(1) solid $stroke-color !important;
    border-radius: toRem(12) !important;
    li {
      margin-bottom: toRem(5);
      &:last-child {
        margin-bottom: 0;
      }
    }
    a {
      padding: toRem(7) toRem(9);
      border-radius: toRem(7);
      @include fontFamily(12, $fw_medium, 16, $para-text !important);
      &:hover,
      &.active {
        background-color: $secondary-color;
        p {
          color: $text-black !important;
        }
        svg {
          path,
          circle,
          ellipse {
            stroke: $text-black;
          }
        }
      }
    }
  }
}
.dropdown {
  &-one {
    position: relative;
    .dropdown-toggle {
      border: none;
      border-radius: toRem(12);
      min-width: toRem(125);
      padding: toRem(13) toRem(19.75);
      @include fontFamily(16, $fw_semiBold, 19, $white);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: toRem(10);
      &::after {
        content: "\f107";
        font: var(--fa-font-solid);
        border: 0;
      }
    }
    .dropdown-menu {
      background-color: $white;
      border: toRem(1) solid $color3;
      border-radius: toRem(12);
      transform: translateY(toRem(60));
      min-width: toRem(125);
      padding: toRem(13);
      &.show {
        top: 15% !important;
      }
      li {
        padding-bottom: toRem(7);
        &:last-child {
          padding-bottom: 0;
        }
      }
      .dropdown-item {
        display: flex;
        align-items: center;
        gap: toRem(6.64);
        padding: 0;
        @include fontFamily(14, $fw_medium, 17, $para-text);
        &:hover {
          color: $main-color;
          background-color: transparent;
        }
      }
    }
  }
}
// .post-dropdown {
//   &-one {
//     width: toRem(30);
//     height: toRem(30);
//     border-radius: 50%;
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     &:hover {
//       background-color: $black-5 !important;
//     }
//     &.dropdown-toggle {
//       &::after {
//         display: none;
//       }
//     }
//     ~ .dropdown-menu {
//       -webkit-transform: translateY(toRem(40));
//       -ms-transform: translateY(toRem(40));
//       transform: translateY(toRem(40));
//       > li {
//         margin-bottom: toRem(5);
//         &:last-child {
//           margin-bottom: 0;
//         }
//       }
//     }
//   }
// }
/* Search */
.search {
  &-one {
    position: relative;
    flex: 1 1 auto;
    max-width: toRem(277);
    display: flex;
    input {
      width: 100%;
      height: toRem(40);
      border: 0;
      border-radius: toRem(50);
      background-color: $header-search-bg;
      @include fontFamily(14, $fw_regular, 17, $white);
      padding: toRem(11) toRem(36) toRem(12) toRem(18);
      &:focus {
        @include fontFamily(14, $fw_regular, 17, $white);
        border-color: var(--primary-color);
      }
      &::placeholder {
        @include fontFamily(14, $fw_regular, 17, $white);
      }
    }
    .icon {
      position: absolute;
      top: 50%;
      right: toRem(18);
      transform: translateY(-50%);
      display: flex;
      max-width: toRem(15);
      height: 100%;
      max-height: toRem(16);
      border: none;
      padding: 0;
      background-color: transparent;
    }
  }
  &-two {
    position: relative;
    flex: 1 1 auto;
    max-width: toRem(277);
    display: flex;
    input {
      width: 100%;
      height: toRem(40);
      border: 0;
      border-radius: toRem(8);
      background-color: $secondary-color;
      @include fontFamily(14, $fw_regular, 17, $text-black);
      padding: toRem(11) toRem(36) toRem(12) toRem(18);
      &:focus {
        @include fontFamily(14, $fw_regular, 17, $text-black);
        border-color: var(--primary-color);
      }
      &::placeholder {
        @include fontFamily(14, $fw_regular, 17, $text-black);
      }
    }
    .icon {
      position: absolute;
      top: 50%;
      right: toRem(18);
      transform: translateY(-50%);
      display: flex;
      max-width: toRem(15);
      height: 100%;
      max-height: toRem(16);
      border: none;
      padding: 0;
      background-color: transparent;
    }
  }
}
// /* User */
// .zUser {
//   &-one {
//     position: relative;
//     width: toRem(110);
//     height: toRem(110);
//     border-radius: 50%;
//     > img {
//       border-radius: 50%;
//     }
//     .zBadge {
//       position: absolute;
//       bottom: 0;
//       right: 0;
//       width: toRem(35);
//       height: toRem(35);
//       border: toRem(1) solid $border-color;
//       border-radius: 50%;
//       background-color: $white;
//       display: -webkit-box;
//       display: -ms-flexbox;
//       display: flex;
//       -webkit-box-pack: center;
//       -ms-flex-pack: center;
//       justify-content: center;
//       -webkit-box-align: center;
//       -ms-flex-align: center;
//       align-items: center;
//     }
//   }
// }
/* Badges */
.zBadge {
  display: inline-block;
  padding: toRem(3) toRem(16);
  border-radius: toRem(6);
  @include fontFamily(14, $fw_medium, 24, $text-black);
  background-color: $para-text;
  &-active {
    background-color: $green-light;
    color: $green;
  }
  &-inactive {
    background-color: $cancel-color;
    color: $para-text;
  }
  &-success {
    background-color: $green-light;
    color: $green;
  }
  &-fuilure {
    background-color: $red-light;
    color: $red;
  }
  &-pending {
    background-color: $yellow-light;
    color: $yellow;
  }
}
/* Lists */
.zList {
  &-pb {
    &-12 {
      li {
        padding-bottom: toRem(12);
        &:last-child {
          padding-bottom: 0;
        }
      }
    }
    &-13 {
      li {
        padding-bottom: toRem(13);
        &:last-child {
          padding-bottom: 0;
        }
      }
    }
    &-17 {
      li {
        padding-bottom: toRem(17);
        &:last-child {
          padding-bottom: 0;
        }
      }
    }
    &-20 {
      li {
        padding: toRem(20) 0;
        border-bottom: toRem(1) solid $stroke-2-color;
        &:first-child {
          padding-top: 0;
        }
        &:last-child {
          padding-bottom: 0;
          border-bottom: none;
        }
      }
    }
    &-21 {
      li {
        padding-bottom: toRem(21);
        &:last-child {
          padding-bottom: 0;
        }
      }
    }
  }
  &-one {
    > li {
      display: flex;
      align-items: center;
      > * {
        &:first-child {
          flex: 0 0 toRem(120);
        }
      }
    }
  }
}
