$filter-selected-item-bg: $body-bg-alt !default;
$filter-selected-item-border: null !default;
$filter-selected-item-color: $body-color !default;
$filter-reset-color: $state-error !default;

.filter-selected {
   margin-bottom: $grid-gutter-width;

   .filter-selected-inner {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
   }

   .filter-selected-item {
      display: inline-flex;
      align-items: center;
      border: $filter-selected-item-border;
      background: $filter-selected-item-bg;
      color: $filter-selected-item-color;
      padding: 5px 30px 5px 12px;
      margin-right: 5px;
      margin-bottom: 5px;
      position: relative;
   }

   .delete {
      @include underline-never;

      color: $filter-reset-color;
      line-height: 1;
      right: 10px;
      position: absolute;
      transition: color $transition-speed;

      @include haf {
         color: $text-dark;
      }
   }

   .reset {
      @include underline-hover;

      padding: 6px 0;
      color: $text-dark;

      span {
         line-height: 1;
         color: $filter-reset-color;
         margin-left: 5px;
         position: relative;
         top: -2px;
      }
   }

   &.empty {
      display: none;
   }

   @media screen and (max-width: $sm - 1) {
      .reset {
         margin-top: 15px;
      }
   }
}
