// stylelint-disable selector-max-specificity

// Filters list
//
// A vertical list of filters.
.filter-list {
  list-style-type: none;

  &.small .filter-item {
    // stylelint-disable-next-line primer/spacing
    padding: 6px 12px;
    // stylelint-disable-next-line primer/typography
    font-size: $font-size-small;
  }

  &.pjax-active .filter-item {
    color: var(--fgColor-muted, var(--color-fg-muted));
    background-color: transparent;

    &.pjax-active {
      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
      background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
    }
  }
}

.filter-item {
  position: relative;
  display: block;
  padding: var(--base-size-8) var(--base-size-16);
  margin-bottom: var(--base-size-4);
  overflow: hidden;
  // stylelint-disable-next-line primer/typography
  font-size: $h5-size;
  color: var(--fgColor-muted, var(--color-fg-muted));
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  // stylelint-disable-next-line primer/borders
  border-radius: $border-radius;

  &:hover {
    text-decoration: none;
    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
  }

  &.selected,
  &[aria-selected='true'],
  &[aria-current]:not([aria-current='false']) {
    color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
    background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));

    // fallback :focus state
    &:focus {
      @include focusOutlineOnEmphasis;

      // remove fallback :focus if :focus-visible is supported
      &:not(:focus-visible) {
        outline: solid 1px transparent;
        box-shadow: none;
      }
    }

    // default focus state
    &:focus-visible {
      @include focusOutlineOnEmphasis;
    }
  }

  .count {
    float: right;
    // stylelint-disable-next-line primer/typography
    font-weight: $font-weight-bold;
  }

  .bar {
    position: absolute;
    top: var(--base-size-2);
    right: 0;
    bottom: var(--base-size-2);
    z-index: -1;
    display: inline-block;
    background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
  }
}