/* <link rel="stylesheet" href="{ basePath }/sfsites/c/resource/ecommStyle/css/components/commerce-search-paging-control.css?{ versionKey }"/> */
/* 
    This component is used on the "Category", "Search", "Cart" pages
*/

commerce_search-paging-control {
    --ecomm-commerce-search-paging-control-color: var(--ecomm-color-black-01);
    --ecomm-commerce-search-paging-control-background-color: var(--ecomm-color-white-01);
    --ecomm-commerce-search-paging-control-background-color-hover: var(--ecomm-color-white-03);
    --ecomm-commerce-search-paging-control-current-background-color: var(--ecomm-color-white-06);
    --ecomm-commerce-search-paging-control-icon-chevron-left: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.3276 19.8722L7.15517 12.8876C6.94828 12.6831 6.94828 12.3424 7.15517 12.138L14.3276 5.15332C14.5345 4.94889 14.8793 4.94889 15.0862 5.15332L15.8448 5.9029C16.0517 6.10733 16.0517 6.44804 15.8448 6.65247L10.1552 12.138C9.94828 12.3424 9.94828 12.6831 10.1552 12.8876L15.7759 18.3731C15.9828 18.5775 15.9828 18.9182 15.7759 19.1227L15.0172 19.8722C14.8448 20.0426 14.5345 20.0426 14.3276 19.8722Z' fill='%233B3F42'/%3E%3C/svg%3E%0A");
    --ecomm-commerce-search-paging-control-icon-chevron-right: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.46794 3.41233L17.2847 11.032C17.5113 11.255 17.5113 11.6267 17.2847 11.8497L9.46794 19.4693C9.24137 19.6923 8.86375 19.6923 8.63717 19.4693L7.8064 18.6516C7.57983 18.4286 7.57983 18.0569 7.8064 17.8339L13.9616 11.8497C14.1882 11.6267 14.1882 11.255 13.9616 11.032L7.84417 5.04777C7.61759 4.82475 7.61759 4.45306 7.84417 4.23005L8.67494 3.41233C8.90151 3.22649 9.24137 3.22649 9.46794 3.41233Z' fill='%233B3F42'/%3E%3C/svg%3E%0A");

    padding-top: 4rem !important;
    padding-bottom: 0 !important;
}

@media (max-width: 1023.98px) {

    commerce_search-paging-control {
        padding-top: 1.5rem !important;
    }

}

@media (max-width: 767.98px) {

    commerce_search-paging-control {
        padding-top: 3rem !important;
    }

}

commerce_search-paging-control nav.pageControlPart {
    grid-column-gap: 0.5rem;
}

commerce_search-paging-control nav.pageControlPart > button,
commerce_search-paging-control nav.pageControlPart > span {
    margin: 0 !important;
}

commerce_search-paging-control button.nav-direction,
commerce_search-paging-control button.nav-button,
commerce_search-paging-control span.nav-button-current {
    width: 2.5rem !important;
    max-width: 2.5rem !important;
    height: 2.5rem !important;
    line-height: 1 !important;
    padding: 0 !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: var(--ecomm-commerce-search-paging-control-color, var(--dxp-g-root-contrast)) !important;
    border: 0 !important;
    border-radius: 2.5rem !important;
    background-color: var(--ecomm-commerce-search-paging-control-background-color, var(--dxp-g-root)) !important;
    transition: background-color 0.1s;
}

/* Arrows */

commerce_search-paging-control button.nav-direction {
    position: relative;
}

commerce_search-paging-control button.nav-direction::after {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    transition: opacity 0.1s;
}

commerce_search-paging-control button.nav-direction[aria-disabled="false"]:hover {
    background-color: var(--ecomm-commerce-search-paging-control-background-color-hover, var(--dxp-g-root-1)) !important;
}

commerce_search-paging-control button.nav-direction[aria-disabled="true"]::after {
    opacity: 0.2;
}

commerce_search-paging-control button.nav-direction:first-child:after {
    content: var(--ecomm-commerce-search-paging-control-icon-chevron-left);
}

commerce_search-paging-control button.nav-direction:last-child:after {
    content: var(--ecomm-commerce-search-paging-control-icon-chevron-right);
}

commerce_search-paging-control button.nav-direction lightning-icon {
    opacity: 0;
}

/* Nav button */

commerce_search-paging-control button.nav-button:hover {
    background-color: var(--ecomm-commerce-search-paging-control-background-color-hover, var(--dxp-g-root-1)) !important;
}

/* Button current */

commerce_search-paging-control span.nav-button-current {
    font-weight: 500 !important;
    background-color: var(--ecomm-commerce-search-paging-control-current-background-color, var(--dxp-g-brand)) !important;
}