@import "shop_partials/shop-filters";

// Alert when search, taxon, filter is triggered

.alert-box.search-alert {
  background-color: $white;
  color: #777;
  font-size: 1em;
  padding: 0.35em 0 0;
  border: 0;
  margin: 0;

  .clear-all {
    color: $grey-500;
    margin-left: 1.5em;

    &:hover {
      color: $grey-600;
    }
  }

  .no-results-bar {
    @include breakpoint(desktop) {
      text-align: center;
    }
  }

  .no-results {
    color: $grey-800;
    font-style: italic;
    font-size: 1.25em;
  }

  .clear-search {
    background-color: transparent;
    padding: 0;
    margin: 0;
    color: $orange-500;
    font-size: 1.25em;

    &:hover {
      color: $orange-400;
    }
  }

  span {
    color: $grey-800;
    font-style: italic;

    &.applied-taxons, &.applied-properties {
      color: $clr-blue;
      font-weight: bold;

      .join-word {
        font-weight: normal;
      }
    }

    &.applied-search {
      font-weight: bold;
      color: $teal-500;
    }
  }
}

.sticky-shop-filters-container {
  position: sticky;
  top: $topbar-height;
  max-height: calc(100vh - #{$topbar-height});
  overflow-y: auto;
}
