/*
Theme Name: General Block WP Theme
Description: Used to style blocks.
*/

/* Margin Top */
.custom-block:where(.mt-20) { --mt: 20px !important; }
.custom-block:where(.mt-40) { --mt: 40px !important; }
.custom-block:where(.mt-60) { --mt: 60px !important; }
.custom-block:where(.mt-80) { --mt: 80px !important; }
.custom-block:where(.mt-100) { --mt: 100px !important; }
.custom-block:where(.mt-120) { --mt: 120px !important; }
.custom-block:where(.mt-140) { --mt: 140px !important; }
.custom-block:where(.mt-160) { --mt: 160px !important; }
.custom-block:where(.mt-180) { --mt: 180px !important; }
.custom-block:where(.mt-200) { --mt: 200px !important; }

/* Margin Bottom */
.custom-block:where(.mb-20) { --mb: 20px !important; }
.custom-block:where(.mb-40) { --mb: 40px !important; }
.custom-block:where(.mb-60) { --mb: 60px !important; }
.custom-block:where(.mb-80) { --mb: 80px !important; }
.custom-block:where(.mb-100) { --mb: 100px !important; }
.custom-block:where(.mb-120) { --mb: 120px !important; }
.custom-block:where(.mb-140) { --mb: 140px !important; }
.custom-block:where(.mb-160) { --mb: 160px !important; }
.custom-block:where(.mb-180) { --mb: 180px !important; }
.custom-block:where(.mb-200) { --mb: 200px !important; }

/* Padding Top */
.custom-block:where(.pt-20) { --pt: 20px !important; }
.custom-block:where(.pt-40) { --pt: 40px !important; }
.custom-block:where(.pt-60) { --pt: 60px !important; }
.custom-block:where(.pt-80) { --pt: 80px !important; }
.custom-block:where(.pt-100) { --pt: 100px !important; }
.custom-block:where(.pt-120) { --pt: 120px !important; }
.custom-block:where(.pt-140) { --pt: 140px !important; }
.custom-block:where(.pt-160) { --pt: 160px !important; }
.custom-block:where(.pt-180) { --pt: 180px !important; }
.custom-block:where(.pt-200) { --pt: 200px !important; }

/* Padding Bottom */
.custom-block:where(.pb-20) { --pb: 20px !important; }
.custom-block:where(.pb-40) { --pb: 40px !important; }
.custom-block:where(.pb-60) { --pb: 60px !important; }
.custom-block:where(.pb-80) { --pb: 80px !important; }
.custom-block:where(.pb-100) { --pb: 100px !important; }
.custom-block:where(.pb-120) { --pb: 120px !important; }
.custom-block:where(.pb-140) { --pb: 140px !important; }
.custom-block:where(.pb-160) { --pb: 160px !important; }
.custom-block:where(.pb-180) { --pb: 180px !important; }
.custom-block:where(.pb-200) { --pb: 200px !important; }

.custom-block {
    margin-block: var(--mt, 0px) var(--mb, 0px);
    padding-block: var(--pt, 0px) var(--pb, 0px);
}

.custom-block:is(.bg-grey), .wp-native-block:has(.bg-grey) {
    background-color: var(--c-background-grey);
}

.custom-block:is(.bg-half-grey-top), .wp-native-block:has(.bg-half-grey-top) {
    background: linear-gradient(to bottom, var(--c-background-grey) 0%, var(--c-background-grey) 50%, #fff 50%, #fff 100%);
}

.custom-block:is(.bg-half-grey-bottom), .wp-native-block:has(.bg-half-grey-bottom) {
    background: linear-gradient(to top, var(--c-background-grey) 0%, var(--c-background-grey) 50%, #fff 50%, #fff 100%);
}

.custom-block:is(.bg-gradient), .wp-native-block:has(.bg-gradient) {
    background-image: linear-gradient(90deg, var(--c-gradient-primary));
    color: white;
}

.custom-block:is(.bg-gradient) :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
.wp-native-block:has(.bg-gradient) :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    color: white;
}

.custom-block:is(.bg-gradient) .btn.link, .wp-native-block:has(.bg-gradient) .btn.link {
    color: white;
}

#page .custom-block:is(.bg-gradient) :where(strong, b),
#page .wp-native-block:has(.bg-gradient) :where(strong, b) {
    color: white;
}

.custom-block:is(.bg-gradient) h6,
.wp-native-block:has(.bg-gradient) h6 {
    background-color: rgb(255 255 255 / .12);
}

:is(.custom-block, .wp-native-block) p a {
    color: inherit;
    text-underline-offset: 2px;
}

:where(.custom-block, .wp-native-block) ul {
    padding-left: 1.25rem;
}

:where(.custom-block, .wp-native-block) ul li:not(:last-child) {
    margin-bottom: 0.5rem;
}

@media screen and (width <= 800px) {
    /* Padding Top */
    .custom-block:where(.pt-180) { --pt: 100px !important; }
    .custom-block:where(.pt-160) { --pt: 80px !important; }
    .custom-block:where(.pt-140) { --pt: 80px !important; }
    .custom-block:where(.pt-100) { --pt: 80px !important; }
    .custom-block:where(.pt-80) { --pt: 60px !important; }
    .custom-block:where(.pt-60) { --pt: 40px !important; }

    /* Padding Bottom */
    .custom-block:where(.pb-180) { --pb: 100px !important; }
    .custom-block:where(.pb-160) { --pb: 80px !important; }
    .custom-block:where(.pb-140) { --pb: 80px !important; }
    .custom-block:where(.pb-100) { --pb: 80px !important; }
    .custom-block:where(.pb-80) { --pb: 60px !important; }
    .custom-block:where(.pb-60) { --pb: 40px !important; }

    /* Margin Top */
    .custom-block:where(.mt-180) { --mt: 100px !important; }
    .custom-block:where(.mt-160) { --mt: 80px !important; }
    .custom-block:where(.mt-140) { --mt: 80px !important; }
    .custom-block:where(.mt-100) { --mt: 80px !important; }
    .custom-block:where(.mt-80) { --mt: 60px !important; }
    .custom-block:where(.mt-60) { --mt: 40px !important; }

    /* Margin Bottom */
    .custom-block:where(.mb-160) { --mb: 80px !important; }
    .custom-block:where(.mb-140) { --mb: 80px !important; }
    .custom-block:where(.mb-100) { --mb: 80px !important; }
    .custom-block:where(.mb-80) { --mb: 60px !important; }
    .custom-block:where(.mb-60) { --mb: 40px !important; }
}