// Search filter
.#{$prefix}-courses-filter,
.#{$prefix}-filter-toggle {
  // box-shadow: 0 0.063rem 0.25rem rgba(var(--wpt-lms-primary-800), 0.06);
  padding: 0 0.625rem 0.625rem 0;
  .#{$prefix}-filter-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    .#{$prefix}-filter-head {
      display: flex;
      gap: 5px;
      justify-content: space-between;
    }
    .button {
      margin-bottom: 0;
      border: 0;
      box-shadow: none;
      height: max-content;
      padding: 0;
      display: none;
      background-color: none;
      height: max-content;
      border-radius: 0;
      font-size: 0.75rem;
      color: rgba(var(--wpt-lms-black));
      i {
        font-size: 1rem;
        color: rgba(var(--wpt-lms-primary-700));
        // padding: 0.25rem;
        background-color: rgba(var(--wpt-lms-primary-100));
        border-radius: 0.25rem;
        width: 1.25rem;
        height: 1.25rem;
        display: flex;
        flex-wrap: wrap;
        place-content: center;
      }
      &:hover {
        background-color: transparent;
      }
      &.wpt-lms-check-filter {
        display: flex;
      }
    }
    .#{$prefix}-filter-search {
      position: relative;
      width: 100%;
      max-width: 100%;
      line-height: 1;
      flex: 1;
      input[type="text"] {
        width: 100%;
        padding: 0.625rem 0.625rem 0.625rem 2.125rem;
      }
      i {
        position: absolute;
        top: 12px;
        left: 12px;
        display: inline-block;
        content: "\F0CD";
        color: rgba(var(--wpt-lms-gray));
        -webkit-animation: lp-rotating 1s linear infinite;
        -moz-animation: lp-rotating 1s linear infinite;
        animation: lp-rotating 1s linear infinite;
      }
    }
    .#{$prefix}-filter {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      h3 {
        font-size: 1rem;
        font-weight: 500;
        color: rgba(var(--wpt-lms-black));
      }
      .#{$prefix}-filter-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        li {
          label {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            text-transform: capitalize;
            color: rgba(var(--wpt-lms-black), 0.75);
            line-height: 1.125rem;
            font-size: 0.875rem;
            input {
              margin: 0;
              height: 1.125rem;
              width: 1.125rem;
              &[type=checkbox]:checked::before {
                padding: 1px 3px;
                width: 12px;
                height: auto;
                transform: scale(0.875rem);
              }
            }
          }
        }
      }
    }
    // .#{$prefix}-filter-tag,
    // .#{$prefix}-filter-category {
    //   height: auto;
    //   max-height: 237px;
    //   ul {
    //     overflow-y: auto;
    //     scrollbar-width: thin;
    //   }
    // }
    .#{$prefix}-more-category,
    .#{$prefix}-more-tag {
      height: auto;
      max-height: 155px;
      overflow: hidden;
      &.expanded {
        overflow: visible;
        max-height: max-content;
      }
    }
  }
}
.#{$prefix}-courses-filter {
  // border-right: 1px solid rgba(var(--wpt-lms-box-border));
  height: max-content;
  padding: 0;
}
.#{$prefix}-layout-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  .switch-layout {
    display: flex;
    line-height: 1;
    text-align: right;
    flex: 0 0 2rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--wpt-lms-box-border), 1);
    border-radius: 0.5rem;
    padding: 0.25rem;
    & input[type="radio"] {
      display: none;
    }
    input[type="radio"]:nth-child(1):checked~.switch-btn:nth-child(2)::before {
      color: rgba(var(--wpt-lms-primary-500));
      background-color: rgba(var(--wpt-lms-primary-100));
    }
    input[type="radio"]:nth-child(3):checked~.switch-btn:nth-child(4)::before {
      color: rgba(var(--wpt-lms-primary-500));
      background-color: rgba(var(--wpt-lms-primary-100));
    }
    .switch-btn {
      display: block;
      margin: 0;
      padding: 0;
      line-height: 2em;
      text-align: center;
      cursor: pointer;
      &::before {
        display: flex;
        flex-wrap: wrap;
        place-content: center;
        color: rgba(var(--wpt-lms-gray), 0.5);
        font-family: "remixicon";
        line-height: 1;
        font-size: 1rem;
        width: 1.875rem;
        height: 1.875rem;
        border-radius: 0.25rem;
      }
      &.grid::before {
        content: "\EDDE";
      }
      &.list::before {
        content: "\EEBA";
      }
    }
  }
  .#{$prefix}-filter-btn {
    font-size: 1.25rem;
    color: rgba(var(--wpt-lms-primary-700));
    border: none;
    background-color: transparent;
    padding: 0;
    box-shadow: none;
    height: max-content;
    margin: 0.5rem 0.375rem;
    width: 2rem;
    display: none;
    i {
      margin-top: 2px;
    }
    &:hover {
      background-color: transparent;
      box-shadow: none;
    }
  }
  .#{$prefix}-filter-toggle {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: fixed;
    width: 300px;
    height: 100vh;
    background-color: rgba(var(--wpt-lms-white));
    top: 0;
    right: -100%;
    z-index: 9999;
    transition: all 0.5s ease-in-out;
    padding: 1.25rem 0 1.25rem 0px;
    .#{$prefix}-filter-form {
      height: calc(100vh - 1.25rem);
      overflow-y: auto;
      padding: 0 0 1.25rem 1.25rem;
      width: 100%;
      max-height: max-content;
      .#{$prefix}-filter-search {
        padding-right: 1.25rem;
      }
    }
    .#{$prefix}-filter-close {
      width: max-content;
      margin-right: 1.25rem;
      margin-bottom: 1.25rem;
      padding: 0.75rem;
      i {
        color: rgba(var(--wpt-lms-white));
        font-size: 1.25rem;
      }
    }
    &.#{$prefix}-filter-show {
      right: 0;
    }
  }
}
.#{$prefix}-category-courses {
  .#{$prefix}-filter {
    .#{$prefix}-search {
      display: none;
    }
  }
}
@media (max-width: 992px) {
  .#{$prefix}-courses-filter {
    display: none;
  }
  .#{$prefix}-layout-filter {
    .#{$prefix}-filter-btn {
      display: flex;
    }
  }
}
@media (max-width: 767px) {
  .#{$prefix}-filter {
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
  }
}