/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ~ Copyright 2021 Adobe
 ~
 ~ Licensed under the Apache License, Version 2.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~
 ~     http://www.apache.org/licenses/LICENSE-2.0
 ~
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.productcollection__results-count {
    text-align: center;
}

.productcollection__root {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: minmax(240px, 1fr) auto;
    grid-template-rows: max-content max-content max-content auto;
}

.productcollection__filters {
    grid-row-end: 4 span;
}

.productcollection__current-filters {
    list-style-type: none;
}

.productcollection__current-filter-icon::before {
    display: block;
    width: 18px;
    height: 18px;
    content: '';
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../resources/cross.svg');
}

.productcollection__filters-body {
    grid-row-end: 2 span;
    list-style-type: none;
}

.productcollection__filter-toggler {
    opacity: 0;
}

.productcollection__filter-header {
    display: grid;
    grid-template-columns: 1fr auto;
}

.productcollection__filter-icon {
    display: none;
}
.productcollection__filter-icon::before {
    display: block;
    width: 24px;
    height: 24px;
    content: '';
}

.productcollection__filter-icon.productcollection__filter-icon--closed::before {
    background-image: url('../resources/chevron-down.svg');
}

.productcollection__filter-icon.productcollection__filter-icon--open::before {
    background-image: url('../resources/chevron-up.svg');
}

.productcollection__filter-items {
    list-style-type: none;
}

.productcollection__items {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: max-content;
}

.productcollection__item-xf {
    grid-column: 1/-1;
}

.productcollection__item-image {
    height: auto;
    width: 100%;
}

.productcollection__sort-fields {
    float: right;
}

.productcollection__sort-order::before {
    display: inline-block;
    width: 24px;
    height: 24px;
    content: '';
}

.productcollection__sort-order.productcollection__sort-order--asc::before {
    background-image: url('../resources/arrow-up.svg');
}

.productcollection__sort-order.productcollection__sort-order--desc::before {
    background-image: url('../resources/arrow-down.svg');
}

.productcollection__loadmore-button {
    display: block;
    margin: 0 auto auto auto;
}

.productcollection__pagination {
    display: grid;
    grid-column: 2;
    justify-content: center;
}

.productcollection__pagination-arrow {
    grid-row-start: 1;
}

.productcollection__pagination-icon::before {
    display: block;
    width: 24px;
    height: 24px;
    content: '';
}

.productcollection__pagination-arrow.productcollection__pagination-arrow--prev
    .productcollection__pagination-icon::before {
    background-image: url('../resources/chevron-left.svg');
}

.productcollection__pagination-arrow.productcollection__pagination-arrow--prev.productcollection__pagination-arrow--inactive
    .productcollection__pagination-icon::before {
    background-image: url('../resources/chevron-left.svg');
}

.productcollection__pagination-arrow.productcollection__pagination-arrow--next
    .productcollection__pagination-icon::before {
    background-image: url('../resources/chevron-right.svg');
}

.productcollection__pagination-arrow.productcollection__pagination-arrow--next.productcollection__pagination-arrow--inactive
    .productcollection__pagination-icon::before {
    background-image: url('../resources/chevron-right.svg');
}

.productcollection__pagination-button {
    grid-row-start: 1;
}

.productcollection__pagination-button-title {
    padding: 0.1rem 0.4rem;
}

.productcollection__pagination-button--current .productcollection__pagination-button-title {
    border: 1px solid;
}
