@import "../../variables";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins/breakpoints";

.shop-category-component {
    position: relative;

    @include media-breakpoint-up(md) {
        padding: 2em 4em;
    }
    @include media-breakpoint-up(xs) {
        padding: 1em 2em;
    }
}

.shop-category-component-filter::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    filter: brightness(40%);
}

.shop-category-header {
    color: $shop-category-header-color;
    font-family: $shop-category-font;
    font-weight: $shop-category-header-font-weight;
    @include media-breakpoint-up(lg) {
        padding-right: 4em;
    }
    @include media-breakpoint-up(md) {
        padding-right: 2em;
    }
}

.shop-category-header-text-color-other {
    color: $shop-category-header-font-color-other;
}

.shop-category-label {
    font-family: $shop-category-font;
    font-size: $shop-category-font-size;
    text-decoration: underline;
    padding: 0.375em 0.5em;
    @include media-breakpoint-up(md) {
        padding: 0.625em 1.5em;
    }
}

.shop-category-label-a {
    color: $shop-category-label-a-color !important;
}

.shop-category-label-a-color-other {
    color: $shop-category-label-a-color-other !important;
}
