.category-filter {
  background-color: var(--color-background-category-filter);
  border-color: var(--color-border-default);
  border-radius: var(--size-border-radius-xl);
  color: var(--color-text-category-filter);
  font-family: var(--asset-fonts-body);
  font-weight: var(--size-font-weight-medium);
  height: max-content;
  transition-duration: 0.2s;
  transition-property: background-color, border, box-shadow, color;
  transition-timing-function: cubic-bezier(0.67, 0.83, 0.67);
  white-space: nowrap;

  &.disabled {
    opacity: 0.65;

    &:hover {
      background-color: var(--color-background-category-filter);
      border-color: var(--color-border-default);
      color: var(--color-text-category-filter-hover);
    }
  }

  &.selected {
    background-color: var(--color-background-category-filter-active);
    border-color: var(--color-brand-primary-500);
    color: var(--color-text-category-filter-active);

    &:hover {
      background-color: var(--color-background-category-filter-active-hover);
      color: var(--color-text-category-filter-active-hover);
      border-color: var(--color-background-category-filter-active-hover);
    }

    &.disabled:hover {
      background-color: var(--color-background-category-filter-active);
    }
  }

  &:hover {
    background-color: var(--color-background-category-filter-hover);
    border-color: var(--color-border-default);
  }

  &:focus {
    outline: 0;
    box-shadow: 0 0 0 4px var(--color-border-separator);

    &.selected {
      box-shadow: 0 0 0 4px var(--color-brand-primary-200);
    }
  }

  &:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px var(--color-border-separator);
    border-color: transparent;

    &.selected {
      box-shadow: 0 0 0 4px var(--color-brand-primary-200);
    }
  }

  &:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: none;
  }
}
