@use "sass:math";

.filter-top {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 0 -10px 20px;

   .title {
      display: flex;
      width: 100%;
      font-size: $font-size-smaller;
      color: $text-muted;
      margin-bottom: 10px;
      white-space: nowrap;
   }

   .uptitle {
      line-height: 50px;
      text-align: right;
   }

   .btn {
      .fc {
         margin-right: 10px;
      }
   }
}

.custom-filters {
   display: flex;
   justify-content: flex-end;
   flex-wrap: wrap;
   width: calc(100% / 6 * 5); // percentage(5/6)
}

.btn-toggle-filters {
   padding: 10px 0;
   width: 100%;

   .fc::before {
      font-size: 16px;
   }
}

.filter-selected {
   margin-left: auto;
}

.filter-top-col {
   width: 20%;
   position: relative;
   z-index: 2;
   padding: 0 10px;
   margin: 0;
}

.secondary-filter-item {
   .filter-label {
      font-family: $font-family-base;
      font-weight: normal;
      letter-spacing: 0;
      text-transform: unset;
      border-color: $body-bg-alt;
      background-color: $body-bg-alt;
      padding: 0 20px;
      min-height: 50px;
      text-align: left;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin: 0;
      border-radius: $border-radius-base;

      &::after {
         @include fonticon;

         content: $icons_caret-down;
         right: 16px;
         position: absolute;
         font-size: 14px;
         transition: transform $transition-speed;
      }

      &.active {
         border-radius: $border-radius-base $border-radius-base 0 0;

         &::after {
            transform: rotate(-180deg);
         }
      }
   }

   .opener-content {
      position: absolute;
      background: $body-bg-alt;
      width: calc(100% - 20px);
      left: 10px;
      border-radius: 0 0 $border-radius-base $border-radius-base;
      top: calc(100% - 1px);
      max-height: 400px;
      overflow: auto;

      &::-webkit-scrollbar {
         width: 6px;
      }

      &::-webkit-scrollbar-track {
         box-shadow: none;
         background: $border-color;
         border-radius: 3px;
      }

      &::-webkit-scrollbar-thumb {
         background: $black;
         border-radius: 3px;
      }

      > div {
         padding: 20px;
      }
   }

   .custom-checkbox {
      margin-bottom:  6px;

      &.checked {
         .custom-control-indicator {
            border-color: $brand-primary;

            &::before {
               content: $icons_check;
            }
         }
      }
   }

   .custom-control-text {
      &::before {
         content: attr(title);
      }
   }
}

.secondary-filter-color {
   display: flex;
   flex-wrap: wrap;

   .filter-param-color {
      width: 47px;
      height: 47px;
   }

   @media screen and (min-width: 1424px) {
      > div:nth-child(4n + 4) {
         .filter-param-color {
            margin-right: 0;
         }
      }
   }

   .checked {
      span::before {
         border-color: $brand-primary;
      }
   }
}

.filter-b2b-wrapper {
   margin-bottom: 20px;

   .filter-list-projection {
      margin-right: 0;
   }
}

@media screen and (max-width: $xxl - 1) {
   .custom-filters {
      width: 80%;
   }

   .filter-top-col {
      width: 25%;

      &:nth-last-child(2) {
         display: none;
      }
   }
}

@media screen and (max-width: $xl - 1) {
   .custom-filters {
      width: 75%;
   }

   .filter-top-col {
      width: calc(100% / 3);

      &:nth-last-child(3) {
         display: none;
      }
   }
}

@media screen and (max-width: $lg - 1) {
   .custom-filters {
      width: 50%;
   }

   .filter-top-col {
      width: 100%;

      &:not(:last-child) {
         display: none;
      }
   }
}

@media screen and (max-width: $sm - 1) {
   .filter-top {
      flex-wrap: wrap;
   }

   .custom-filters {
      width: 100%;
   }
}
