/**
 * Hyvä Themes - https://hyva.io
 * Copyright © Hyvä Themes. All rights reserved.
 * See COPYING.txt for license details.
 */

/**
 * Layout
 */

/* Rows */
[data-content-type="row"] {
    &[data-appearance="contained"] {
        @apply container;

        [data-element="inner"] {
            background-attachment: scroll !important;
        }
    }

    &[data-appearance="full-bleed"] {
        background-attachment: scroll !important;
    }

    &[data-appearance="full-width"] {
        background-attachment: scroll !important;

        > .row-full-width-inner {
            @apply container;
        }
    }
}

body:where(:not([class*="-full-width"])) {
    [data-content-type="row"][data-appearance="contained"] {
        padding-inline: 0;
    }
}

/* Column Groups (both needed for pagebuider backwards compatibiliy) */
[data-content-type="column-group"],
[data-content-type="column-line"] {
    @apply flex-wrap md:flex-nowrap;
}

/* Columns */
[data-content-type="column"] {
    @apply w-full max-w-full;
    background-attachment: scroll !important;
    flex-basis: 100%;

    @variant md {
        flex-basis: auto;
    }
}

/* Tabs/Tab Item */
[data-content-type="tabs"] {
    .tabs-navigation {
        @apply block -mb-px p-0 shadow;

        li.tab-header {
            @apply bg-gray-100 border border-b-0 border-solid border-gray-300 rounded-bl-none rounded-br-none inline-block relative my-0 mr-0 -ml-px max-w-full break-words;

            &:first-child {
                @apply ml-0;
            }

            &.active {
                @apply bg-white z-20;
                border-bottom: 1px solid white;
            }

            a.tab-title {
                @apply cursor-pointer block text-sm font-semibold relative align-middle whitespace-normal py-3 px-5;

                span {
                    @apply font-semibold leading-5 text-black;
                }
            }
        }
    }

    .tabs-content {
        @apply rounded-sm bg-container-lighter shadow border border-solid border-gray-300 relative overflow-hidden z-10;

        [data-content-type="tab-item"] {
            @apply p-8;
            min-height: inherit;
            background-attachment: scroll !important;
        }
    }

    &.tab-align-left {
        .tabs-content {
            border-top-left-radius: 0 !important;
        }
    }

    &.tab-align-right {
        .tabs-content {
            border-top-right-radius: 0 !important;
        }
    }
}

/**
 * Elements
 */

/* Text, Heading, HTML Code */
[data-content-type="text"],
[data-content-type="heading"],
[data-content-type="html"] {
    overflow-wrap: break-word;
}

/* Buttons/Button Item */
[data-content-type="buttons"] {
    max-width: 100%;

    [data-content-type="button-item"] {
        @apply max-w-full mr-2 mb-2;

        [data-element="link"],
        [data-element="empty_link"] {
            @apply max-w-full break-words;
        }

        [data-element="empty_link"] {
            @apply cursor-default;
        }

        :is(a, button, div) {
            @apply shadow-none inline-block;
        }
    }
}

:is(a, button, div) {
    &.pagebuilder-button-primary {
        @apply btn btn-primary;
    }

    &.pagebuilder-button-secondary {
        @apply btn btn-secondary;
    }
}

/* Divider */
[data-content-type="divider"] hr {
    border-block-end: 0;
    border-inline: 0;
}

/**
 * Media
 */

/* Image */
[data-content-type="image"] {
    > [data-element="link"],
    > [data-element="link"] img {
        border-radius: inherit;
    }

    .pagebuilder-mobile-hidden {
        @apply hidden md:inline-block;
    }

    .pagebuilder-mobile-only {
        @apply inline-block md:hidden;
    }

    figcaption {
        overflow-wrap: break-word;
    }
}

/* Video */
[data-content-type="video"] {
    .pagebuilder-video-wrapper {
        overflow: hidden;
    }

    :is(iframe, video) {
        aspect-ratio: 16/9;
    }
}

/* Banner and Slider */
:is([data-content-type="banner"], [data-content-type="slide"]) {
    --pagebuilder-overlay-mx: 0;

    .pagebuilder-overlay {
        max-inline-size: var(--container-lg);
        margin-inline: var(--pagebuilder-overlay-mx);
        padding: --spacing(8);
        border-radius: inherit;
        transition: background-color 500ms ease;

        &.pagebuilder-poster-overlay {
            display: flex;
            justify-content: center;
            align-items: center;
            max-inline-size: 100%;
            min-block-size: inherit;
        }
    }

    &[data-appearance="collage-centered"] {
        --pagebuilder-overlay-mx: auto;
    }

    &[data-appearance="collage-left"] {
        --pagebuilder-overlay-mx: 0 auto;
    }

    &[data-appearance="collage-right"] {
        --pagebuilder-overlay-mx: auto 0;
    }
}

[data-content-type="banner"] {
    & > :is([data-element="link"], [data-element="empty_link"]) {
        color: inherit;
        text-decoration: inherit;

        &:hover {
            color: inherit;
            text-decoration: inherit;
        }
    }

    .pagebuilder-banner-wrapper {
        overflow-wrap: break-word;
        background-clip: padding-box;
        border-radius: inherit;
        background-attachment: scroll !important;

        .pagebuilder-overlay {
            position: relative;

            &:not(.pagebuilder-poster-overlay) {
                @apply max-w-none md:max-w-xl;
            }
        }

        &.jarallax .video-overlay {
            z-index: 0;
        }

        [data-element="content"] {
            min-height: 50px;
            overflow: auto;
        }

        .pagebuilder-banner-button {
            @apply transition-opacity duration-500 ease-in-out max-w-full m-0 mt-5 inline-block;
            overflow-wrap: break-word;
            text-align: inherit;
        }

        .pagebuilder-poster-content {
            width: 100%;
        }
    }
}

[data-content-type="slider"] {
    position: relative;
    padding-block-end: --spacing(12);

    &:not(:has(.snap-track)) {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 100%;
        padding-block: --spacing(6) calc(--spacing(6) + --spacing(12));
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;

        @media (prefers-reduced-motion: no-preference) {
            scroll-behavior: smooth;
        }

        & > * {
            scroll-snap-align: start;
        }
    }

    [data-page-builder-slider-nav] {
        position: absolute;
        inset: auto 0 0;
    }
}

[data-content-type="slide"] {
    --overlay-align: initial;
    position: relative;

    .pagebuilder-slide-wrapper {
        border-radius: inherit;
        min-block-size: inherit;
        overflow-wrap: break-word;

        &.jarallax {
            .video-overlay {
                -webkit-transform: unset;
                z-index: 1;
            }

            .pagebuilder-overlay {
                position: relative;
                z-index: 2;
            }

            [id*="jarallax-container"] > :is(div, img, video, iframe) {
                margin: auto !important;
                transform: none !important;
            }
        }
    }

    .pagebuilder-poster-content {
        inline-size: 100%;
    }

    [data-element="content"] {
        min-height: 50px;
        overflow: auto;
    }
}

/* Map */
[data-content-type="map"] {
    block-size: 300px;
}

/**
 * Add Content
 */

/* Block */
[data-content-type$="block"] {
    .block {
        p:last-child {
            margin-block: 0 --spacing(4);
        }
    }
}

/* Dynamic Block */
[data-content-type="dynamic_block"] {
    [data-content-type="image"] img {
        display: inline-block;
    }

    .block-banners .banner-item-content,
    .block-banners-inline .banner-item-content {
        margin-block-end: auto;
    }
}