@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;
@use 'libs/components/theme/src/lib/styles/_public-api/themes/modern/_compat/mixins'
  as modernMixins;

.sky-filter-btn-active,
.sky-filter-btn-active:hover,
.sky-filter-btn-active:focus {
  color: $sky-highlight-color-success;
  border: 2px solid $sky-highlight-color-success;
  padding: 5px 11px; /* offset the thicker border to avoid button size change */
}

.sky-filter-btn-active:hover,
.sky-filter-btn-active:focus {
  color: $sky-text-color-default;
}

@include mixins.sky-theme-modern {
  .sky-filter-btn-active,
  .sky-filter-btn-active:hover,
  .sky-filter-btn-active:focus {
    color: initial;
    border: none;

    @include modernMixins.sky-theme-modern-button-variant(
      var(--sky-text-color-action-primary),
      var(--sky-background-color-input-selected),
      var(--sky-background-color-primary-dark),
      var(--sky-background-color-primary-dark),
      $sky-theme-modern-padding-button-standard
    );
  }
}

@include mixins.sky-host-responsive-container-xs-min() {
  .sky-filter-btn-text {
    display: none;
  }

  .sky-filter-btn ::ng-deep .sky-dropdown-caret {
    display: none;
  }
}

@include mixins.sky-host-responsive-container-sm-min() {
  .sky-filter-btn-text {
    display: inline;
  }

  .sky-filter-btn ::ng-deep .sky-dropdown-caret {
    display: inline-block;
  }
}
