@import "../../../src/scss/init";

.block-facets {
  $root: &;

  margin-top: var(--content-spacer-m);

  .heading {
    color: var(--category-heading);
    letter-spacing: 0.5px;
  }

  &--filter-block {
    border-top: 1px solid var(--facet-tag-border-color);
    padding-top: var(--content-spacer-xs);
  }

  &__content {
    color: var(--body-text-color);

    .item-list {
      &__links {
        margin-top: var(--content-spacer-xs);
        list-style: none;
        padding: 0;

        .facet-item {
          a {
            color: var(--form-input-text-color);
            text-transform: capitalize;
            display: block;
          }
        }
      }
    }

    .facet-item {
      a {
        color: var(--body-text-color);
        text-transform: capitalize;
        display: block;

        &.is-active {
          color: var(--facet-active-text-color);
        }
      }
    }

    .block-facet {
      &--links {
        margin-top: 3rem;
      }
    }
  }

  &--reset-block {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &#block-resetfilters {
      @include media-breakpoint-down(lg) {
        display: none;
      }
    }

    &__content {
      .btn-reset {
        padding: 0.375rem;
        letter-spacing: 0.08rem;
      }
    }
  }

  &--filter-block {
    &__content {
      margin-top: var(--content-spacer-xs);
    }

    a {
      text-decoration: none;

      &:hover,
      &:active,
      &:focus {
        & .facets-result-item {
          &__value {
            text-decoration: underline;
          }
        }
      }
    }
  }

  &--tag-name {
    #{$root}__content {
      @include media-breakpoint-up(lg) {
        margin-top: var(--content-spacer-m);
      }
    }

    .facet-item {
      display: inline-block;
      line-height: normal;
      margin: 0 0.5625rem 0.5625rem 0;

      a {
        border: 0.1rem solid var(--facet-tag-border-color);
        padding: var(--content-spacer-xxs) var(--content-spacer-m);
        font-weight: 500;

        &,
        &:hover,
        &:active,
        &:focus, {
          text-decoration: none;
        }

        &.is-active {
          background-color: var(--facet-active-bg-color);
        }

        &:hover {
          border: 0.1rem solid var(--facet-tag-border-color-hover);
          opacity: 0.75;
          text-decoration: none;
        }
      }

      &__value {
        &,
        &:hover,
        &:active,
        &:focus {
          text-decoration: none;
        }
      }
    }
  }

  &--category-name {
    .facet-item {
      padding: 10px 0;

      a {
        font-weight: 600;
        color: var(--header-search-page-link-color);

        .facets-result-item {
          &__count {
            font-weight: 400;
            font-size: $font-size-sm;
          }
        }
      }
    }
  }
}
