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

.filter-selected {
   margin-bottom: $spacer-lg;

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

   .filter-selected-item {
      display: inline-block;
      border: $filter-selected-item-border;
      background: $filter-selected-item-bg;
      color: $filter-selected-item-color;
      padding: 5px 25px 5px 10px;
      margin-right: 5px;
      margin-bottom: 5px;
      position: relative;
   }

   .delete {
      @include underline-never;

      color: $filter-reset-color;
      line-height: 1;
      font-size: $font-size-smaller;
      margin-left: 5px;
      position: absolute;
      right: 5px;
      top: calc(50% - (#{$font-size-smaller} / 2));
   }

   .reset {
      @include underline-hover;

      color: $filter-reset-color;
      padding: 6px 0;

      span {
         line-height: 1;
         font-size: $font-size-smaller;
         margin-left: 5px;
      }
   }

   &.empty {
      display: none;
   }
}
