@use "../../tools/a11y";
@use "../../tools/borders";
@use "../../tools/colour";
@use "../../tools/spacing";
@use "../../tools/typography";

.tna-compound-filters {
  @include spacing.space-above;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: spacing.space(0.5) spacing.space(0.75);

  list-style: none;

  border-radius: 0.1px;

  @include a11y.focus-indicator-only-on-keyboard-focus;

  &:empty {
    display: none;
  }

  &__item {
    padding: 0 spacing.space(0.125) 0 spacing.space(0.75);

    display: flex;
    align-items: center;
    gap: spacing.space(0.5);

    line-height: 1.75;

    @include borders.rounded-border;

    @include typography.font-size(16);

    @include colour.colour-border("keyline", 1px);

    &--remove {
      padding-right: 0;
      padding-left: 0;

      background: none;

      border: none;
      border-radius: 0;
    }
  }

  &__link {
    width: 1.5rem;
    height: 1.5rem;

    position: relative;

    font-size: 0;
    line-height: 0;

    text-decoration: none;

    background: transparent;

    border: none;

    cursor: pointer;

    flex-shrink: 0;

    @include borders.rounded-border;

    &::before,
    &::after {
      content: "";

      height: 1rem;
      margin-left: -1px;

      display: block;

      position: absolute;
      top: 0.25rem;
      left: 50%;

      @include colour.colour-border("font-base", 2px, solid, left);
    }

    &::before {
      transform: rotate(45deg);
    }

    &::after {
      transform: rotate(-45deg);
    }

    &:hover {
      @include colour.contrast;
    }
  }
}