.swatch-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px 24px;
  grid-template-columns: repeat(2, auto);
}

.swatch {
  &__label {
    position: relative;
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
  }

  &__checkbox {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 1;
    cursor: pointer;

    &:focus-visible + .swatch__chip {
      outline: 2px solid $blue;
      outline-offset: 2px;
    }

    &:checked + .swatch__chip {
      outline: 4px solid $gray-dark;
      padding: 0;

      :after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: 0 0;
        outline: 3px solid #fff;
      }
    }
  }

  &__chip {
    background: $white;
    border: 1px solid $gray;
    height: 24px;
    width: 24px;
    cursor: pointer;
    border-radius: 50px;

    .bg {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50px;
    }
  }

  &__title {
    line-height: 24px;
    color: $gray-dark;
    flex: none;
    order: 1;
    flex-grow: 0;
  }
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;

  &__input {
    width: 18px;
    height: 18px;
    accent-color: $blue;
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 1;
    cursor: pointer;

    &:checked + .filter-card__box {
      border-color: $blue;
      background: $blue;

      .filter-card__icon {
        opacity: 1;
      }
    }

    &__icon {
      opacity: 0;
    }
  }

  &__label {
    color: $gray-dark;
  }
}

@include media-breakpoint-up(sm) {
  .swatch-list {
    grid-template-columns: repeat(3, auto);
    gap: 24px 24px;
  }
}

@include media-breakpoint-up(md) {
  .swatch-list {
    grid-template-columns: repeat(3, auto);
    gap: 24px 40px;
  }
}