@layer components {
    /* I. Icons */
    .bs-icon--energy {
        color: var(--c-orange);
    }

    /* II. Modal */
    .modal {
        position: fixed;
        inset: 0;
        z-index: 101;
        background-color: rgb(0 0 0 / .8);
        visibility: hidden;
        -webkit-box-shadow: 0px 0px 100px 0px #00000040;
                box-shadow: 0px 0px 100px 0px #00000040;
    }

    .modal:target {
        visibility: visible;
    }

    .modal .modal-inner {
        position: fixed;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        padding: 2.5rem;
        background-color: var(--c-white);
        overflow-x: clip;
        overflow-y: auto;
        scrollbar-width: 0;
        min-height: 25vh;
        max-height: calc(100% - 5rem);
        max-width: var(--page-size);
        width: calc(100% - 5rem);
        height: auto;
        opacity: 0;
        -webkit-transition: opacity var(--transition-dur) var(--transition-func);
        transition: opacity var(--transition-dur) var(--transition-func);
    }

    .modal .modal-inner::-webkit-scrollbar {
        display: none !important;
    }

    .modal:target .modal-inner {
        opacity: 1;
    }

    .modal--text .modal-inner {
        max-width: 37.5rem;
    }

    :is(.modal--video) .modal-inner {
        max-width: 62.1875rem;
        padding: 0;
        background: none;
        aspect-ratio: 16 / 9;
        overflow: visible;
    }

    :is(.modal--image) .modal-inner {
        max-width: 62.1875rem;
        padding: 0;
        background: none;
        aspect-ratio: 1;
        width: auto;
        overflow: visible;
    }

    .modal .modal-close {
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        display: block;
        width: 1.25rem;
        height: 1.25rem;
        aspect-ratio: 1;
        background: none;
        border: 0;
        padding: 0;
        margin: 0;
        cursor: pointer;
        color: var(--c-orange);
    }

    :is(.modal--video, .modal--image) .modal-close {
        top: -1.75rem;
        right: -1.75rem;
        color: var(--c-white);
    }

    .modal .modal-close svg {
        width: 100%;
        height: 100%;
    }

    .modal--video :is(.wp-video, .mejs-container, video, iframe) {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        -o-object-fit: cover;
           object-fit: cover;
    }

    .modal--image img {
        width: 100%;
        height: auto;
        max-width: calc(100vw - 5rem);
        max-height: calc(100vh - 5rem);
    }

    /* III. Accordion */
    .accordion {
        --transition-dur: 180ms;
        --transition-func: ease-in-out;
    }

    .accordion .ac-state {
        display: none !important;
    }

    .accordion .ac-trigger {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        cursor: pointer;
        padding: 1.875rem;
    }

    .accordion .ac-title {
        margin: 0;
    }

    .accordion .ac-icon {
        color: var(--c-blue);
        -webkit-transition: -webkit-transform var(--transition-dur) var(--transition-func);
        transition: -webkit-transform var(--transition-dur) var(--transition-func);
        transition: transform var(--transition-dur) var(--transition-func);
        transition: transform var(--transition-dur) var(--transition-func), -webkit-transform var(--transition-dur) var(--transition-func);
    }

    .accordion .ac-state:checked ~ .ac-trigger .ac-icon {
        -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
                transform: rotate(180deg);
    }

    .accordion .ac-content {
        display: -ms-grid;
        display: grid;
        -ms-grid-rows: 0fr;
        grid-template-rows: 0fr;
        -webkit-transition: grid-template-rows var(--transition-dur) var(--transition-func);
        transition: grid-template-rows var(--transition-dur) var(--transition-func);
        transition: grid-template-rows var(--transition-dur) var(--transition-func), -ms-grid-rows var(--transition-dur) var(--transition-func);
    }

    .accordion .ac-content-inner {
        overflow: hidden;
        -webkit-transition: padding var(--transition-dur) var(--transition-func);
        transition: padding var(--transition-dur) var(--transition-func);
    }

    .accordion .ac-state:checked ~ .ac-content {
        -ms-grid-rows: 1fr;
        grid-template-rows: 1fr;
    }

    /* IV. Swiper */
    :root {
        --swiper-navigation-color: var(--c-dark-blue);
        --swiper-navigation-size: 2.875rem;
        --swiper-pagination-progressbar-size: 5px;
        --swiper-pagination-progressbar-bg-color: var(--c-lighter-grey);
        --swiper-pagination-color: var(--c-blue);
    }

    .swiper.fix-overflow {
        padding-block: .5rem;
        margin-block: -.5rem;
    }

    .swiper-navigation {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 0.25rem;
    }

    .swiper-navigation:has(.swiper-button-next[disabled]):has(.swiper-button-prev[disabled]) {
        display: none;
    }

    :is(.swiper-button-next, .swiper-button-prev) {
        --size: 2.875rem !important;
        position: static;
        border-radius: 50%;
        margin: 0;
        border: 1px solid var(--c-light-grey) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none;
    }

    :is(.swiper-button-next, .swiper-button-prev) svg {
        height: .6875rem !important;
    }

    .swiper-button-disabled {
        opacity: .25;
    }

    .is-dark .swiper-button-disabled {
        opacity: .5;
    }

    .swiper-pagination-progressbar {
        position: static;
        padding: 1px;
        width: 6.25rem;
        margin-inline: auto;
        margin-top: 5rem;
    }

    .swiper-pagination-progressbar-fill {
        position: static;
        display: block;
    }

    .is-dark {
        --swiper-pagination-progressbar-bg-color: rgb(from var(--c-white) r g b / .25);
        --swiper-pagination-color: var(--c-white);
    }

    /* V. Add2Any Share */
    .addtoany_shortcode .addtoany_list {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: 1.375rem;
    }

    .addtoany_shortcode .addtoany_list a {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: .3125rem;
        padding: 0 !important;
        text-decoration: none;
        color: var(--c-body-grey);
    }

    .addtoany_shortcode .addtoany_list img {
        max-width: 1.125rem;
        max-height: 1.125rem;
    }

    .addtoany_shortcode .a2a_button_copy_link::after {
        content: 'Copy link';
        text-decoration: none;
        font-size: var(--fs-13-16);
    }

    .addtoany_shortcode .a2a_button_copy_link img {
        width: .9375rem;
        height: .9375rem;
    }

    /* VI. Plus Circle Button */
    .plus-circle-btn {
        --size: 3.25rem;
        --icon-size: 1.125rem;
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        width: var(--size);
        height: var(--size);
        aspect-ratio: 1;
        border-radius: 50%;
    }

    .plus-circle-btn::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background-color: rgb(from var(--c-white) r g b / .2);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .plus-circle-btn .icon {
        position: relative;
        width: var(--icon-size);
        height: var(--icon-size);
        aspect-ratio: 1;
        z-index: 1;
    }

    .plus-circle-btn .icon::before,
    .plus-circle-btn .icon::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        height: 1px;
        width: 100%;
        background-color: currentColor;
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
    }

    .plus-circle-btn .icon::after {
        -webkit-transform: translate(-50%, -50%) rotate(90deg);
            -ms-transform: translate(-50%, -50%) rotate(90deg);
                transform: translate(-50%, -50%) rotate(90deg);
    }

    /* VII. Read Time */
    .readtime {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: .375rem;
        font-size: var(--fs-11-13);
        font-weight: 500;
    }

    .readtime svg {
        -ms-flex-negative: 0;
            flex-shrink: 0;
        width: .75rem;
        height: .75rem;
    }

    @media screen and (width <= 620px) {
        /* IV. Swiper */
        :root {
            --swiper-pagination-progressbar-size: 4px;
        }
        
        .swiper-pagination-progressbar {
            width: 5rem;
            margin-top: 3.125rem;
        }

        /* V. Add2Any Share */
        .addtoany_shortcode .addtoany_list {
            gap: 1.125rem;
        }

        .addtoany_shortcode .addtoany_list img {
            max-width: .8725rem;
            max-height: .8725rem;
        }

        .addtoany_shortcode .a2a_button_copy_link img {
            width: .75rem;
            height: .75rem;
        }

        /* VI. Plus Circle Button */
        .plus-circle-btn {
            --icon-size: .75rem;
        }

        /* VII. Read Time */
        .readtime {
            gap: .25rem;
        }

        .readtime svg {
            width: .625rem;
            height: .625rem;
        }
    }
}