@import "../../helpers";
.sf-filter {
  --checkbox-order: 1;
  --checkbox-border-radius: 100%;
  --color-size: 1.5rem;
  width: 100%;
  --checkbox-border-color: transparent;
  &__color {
    margin: var(--filter-color-margin, 0 var(--spacer-sm) 0 0);
  }
  &__label {
    display: var(--filter-label-display, flex);
    align-items: var(--filter-label-align-items, center);
    margin: var(--filter-label-margin, 0);
    color: var(--filter-label-color, var(--c-link));
    @include font(
      --filter-label-font,
      var(--font-weight--normal),
      var(--font-size--base),
      1.4,
      var(--font-family--primary)
    );
    text-decoration: var(--filter-label-text-decoration);
    transition: transform 150ms ease-in-out;
    transform: var(--filter-label-transform);
    transform-origin: center left;

  }
  &__count {
    display: var(--filter-count-display);
    margin: var(--filter-count-margin, 0 var(--spacer-sm) 0 auto);
    color: var(--filter-count-color, var(--c-text-muted));
    @include font(
      --filter-count-font,
      var(--font-weight--normal),
      var(--font-size--base),
      1.4,
      var(--font-family--secondary)
    );

  }
  &--active {
    --filter-count-color: var(--c-primary);
    --filter-label-color: var(--c-primary);
  }
  @include for-desktop {
    --checkbox-border-radius: 0;
    --checkbox-border-color: var(--c-text-muted);
    --checkbox-order: 0;
    --filter-color-margin: 0;
    --filter-label-margin: 0 0 0 var(--spacer-xs);
    --filter-count-margin: 0 0 0 auto;
    --filter-label-font-size: var(--font-size--sm);
    --filter-count-font-size: var(--font-size--sm);
    &.is-active {
      --filter-label-color: var(--c-text);
      --filter-count-color: var(--c-text-muted);
      --checkbox-border-color: var(--c-primary);
    }
  }
  &.is-color {
    @include for-desktop {
      --checkbox-display: none;
      --filter-label-display: none;
      --filter-count-display: none;
    }
  }
}