.filter-focus {
   .focus-content {
      width: 100%;
      max-width: 940px;
      height: calc(100vh - $grid-gutter-width);
      max-height: 700px;
      overflow: hidden;
      display: flex;
      flex-flow: column;
   }

   .focus-header {
      width: 100%;
      align-self: flex-start;
   }
}

// todo 55px == focus horizontal padding
.filter-focus-content {
   display: flex;
   flex-direction: row-reverse;
   margin: 0 -55px;
   width: calc(100% + (2 * 55px));
   height: calc(100% - 40px - 80px);
   overflow: hidden;

   .nav-tabs-outer {
      width: 25%;
      height: 100%;
   }

   .nav-tabs {
      @include list-unstyled;

      flex-grow: 0;
      width: 100%;

      .nav-item {
         width: 100%;
         float: left;
      }

      .nav-link {
         @include underline-never;

         display: block;
         padding: 20px 10px 20px 55px;
         color: $text-dark;

         &.active {
            background: $body-bg-alt;
         }
      }
   }

   .tab-content {
      width: 75%;
      padding: 0 55px 0 15px;

      > .tab-pane {
         display: none;
      }

      > .active {
         display: block;
      }
   }

   .tab-pane {
      height: 100%;

      > div {
         margin: 0 calc(-1 * $grid-gutter-width / 2);
      }

      .simplebar-content {
         height: 100%;
         display: flex;
         flex-wrap: wrap;
         align-items: flex-start;
         align-content: flex-start;
      }
   }

   .filter-label {
      display: none;
   }

   .custom-control {
      display: flex;
      align-items: center;
      min-height: 60px;
      width: calc(percentage(calc(1 / 3)) - #{$grid-gutter-width});
      padding: 5px 5px 5px 50px;
      margin: 0 calc($grid-gutter-width / 2) $grid-gutter-width;
      border: 1px solid $border-color;
      transition: all $transition-speed;

      &:hover {
         border-color: $black;
      }

      /* stylelint-disable */
      &:first-child {
         margin-top: 0 !important;
      }
      /* stylelint-enable */

      + div {
         width: 100%;
         padding: calc($grid-gutter-width / 2);

         p {
            margin: 0;
         }
      }
   }

   .custom-control-indicator {
      left: calc(50px / 2 - (#{$custom-control-size} / 2));
      top: calc(50% - (#{$custom-control-size} / 2));
   }

   .custom-control-text {
      line-height: $line-height-sm;
   }

   @media screen and (min-width: $md) {
      /* stylelint-disable */
      .opener-content {
         display: block !important;
      }
      /* stylelint-enable */
   }
}

.filter-focus-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   align-self: flex-end;
   width: 100%;
   padding-top: 12px;
   margin-top: 25px;
   border-top: 1px solid $border-color;
}

@media screen and (max-width: $lg - 1) {
   .filter-focus-content {
      .custom-control {
         width: calc(50% - #{$grid-gutter-width});
      }
   }
}

@media screen and (max-width: $md - 1) {
   .filter-focus-content {
      margin: 0;
      width: 100%;
      overflow-y: auto;

      .simplebar-track.simplebar-vertical {
         right: 10px;
      }

      .nav-tabs-outer {
         display: none;
      }

      .tab-content {
         width: 100%;
         padding: 0;

         > .tab-pane {
            display: block;
            height: auto;
         }
      }

      .filter-label {
         display: flex;
         cursor: pointer;
         border: 1px solid $border-color;
         padding: $spacer;
         text-align: left;
         margin: calc($spacer / 2) 0;

         &::after {
            right: $spacer;
         }
      }
   }
}

@media screen and (max-width: $sm - 1) {
   .filter-focus-content {
      .custom-control {
         width: calc(100% - #{$grid-gutter-width});
      }
   }

   .filter-focus-footer {
      flex-wrap: wrap;
      justify-content: center;

      .reset {
         display: inline-block;
         margin-bottom: 10px;
      }
   }
}
