/**
 * 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 mx-auto;

        [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"] {
        @apply px-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 */
[data-content-type="text"] {
    @apply break-words;
}

/* Heading */
[data-content-type="heading"] {
    @apply break-words;
}

/* Buttons/Button Item */
[data-content-type="buttons"] {
    @apply max-w-full;

    [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;
        }

        a,
        button,
        div {
            @apply shadow-none inline-block;
        }
    }
}

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;
}

/* HTML Code */
[data-content-type="html"] {
    @apply break-words;
}

/**
 * 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 {
        @apply break-words;
    }
}

/* Video */
[data-content-type="video"] {
    font-size: 0;

    .pagebuilder-video-inner {
        @apply inline-block w-full;
    }

    .pagebuilder-video-container {
        @apply overflow-hidden relative;
        border-radius: inherit;
        padding-top: 56.25%;
    }

    iframe,
    video {
        @apply h-full w-full absolute left-0 top-0;
    }
}

/* Banner */
[data-content-type="banner"] {
    & > [data-element="link"],
    & > [data-element="empty_link"] {
        color: inherit;
        text-decoration: inherit;

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

    .pagebuilder-banner-wrapper {
        @apply break-words;
        background-clip: padding-box;
        border-radius: inherit;
        background-attachment: scroll !important;

        .pagebuilder-overlay {
            @apply relative transition duration-500 ease-in-out p-8;

            &.pagebuilder-poster-overlay {
                @apply items-center flex justify-center;
            }

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

        &.jarallax {
            .video-overlay {
                @apply z-0;
            }
        }

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

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

        .pagebuilder-poster-content {
            @apply w-full;
        }
    }

    &[data-appearance="collage-centered"] {
        .pagebuilder-banner-wrapper {
            .pagebuilder-overlay {
                @apply mx-auto;
            }
        }
    }

    &[data-appearance="collage-left"] {
        .pagebuilder-banner-wrapper {
            .pagebuilder-overlay {
                @apply mr-auto;
            }
        }
    }

    &[data-appearance="collage-right"] {
        .pagebuilder-banner-wrapper {
            .pagebuilder-overlay {
                @apply ml-auto;
            }
        }
    }
}

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

    &:not(:has(.snap-track)) {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 100%;
        padding-block: theme("spacing.6")
            calc(theme("spacing.6") + theme("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;
    }
}

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

    .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;
    }

    .pagebuilder-overlay {
        max-inline-size: theme("maxWidth.lg");
        padding: theme("padding.8");
        border-radius: inherit;
        transition: background-color 500ms ease;

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

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

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

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

/* Map */
[data-content-type="map"] {
    @apply h-72;
}

/**
 * Add Content
 */

/* Block */
[data-content-type$="block"] {
    .block {
        p:last-child {
            @apply mb-4 mt-0;
        }
    }
}

/* Dynamic Block */
[data-content-type="dynamic_block"] {
    [data-content-type="image"] img {
        @apply inline;
    }

    .block-banners .banner-item-content,
    .block-banners-inline .banner-item-content {
        @apply mb-auto;
    }
}

/**
 * Glider
 */

.glider-contain {
    @apply w-full my-0 mx-auto relative;
}

.glider {
    @apply overflow-y-hidden;

    &.draggable {
        @apply select-none;
        cursor: grab;

        .glider-slide img {
            @apply select-none pointer-events-none;
        }
    }

    &.drag {
        cursor: grabbing;
    }

    &::-webkit-scrollbar {
        @apply opacity-0 h-0;
    }

    .glider-track {
        @apply w-full m-0 p-0 flex z-10;
    }
}

.glider-slide {
    @apply select-none justify-center content-center w-full m-2;
    min-width: 150px;

    img {
        @apply max-w-full;
    }
}

.glider-hide {
    @apply opacity-0;
}

.glider-prev,
.glider-next {
    &.disabled {
        @apply text-gray-500 opacity-25 cursor-default;
    }
}

.glider-dot {
    @apply block w-3 h-3 m-1 bg-black opacity-25 rounded-full shadow cursor-pointer;

    &.active {
        @apply opacity-100;
    }
}

@media (max-width: 36em) {
    .glider::-webkit-scrollbar {
        @apply opacity-100 w-2 h-1 appearance-none;
    }

    .glider::-webkit-scrollbar-thumb {
        @apply opacity-100;
        border-radius: 99px;
        background-color: rgba(156, 156, 156, 0.25);
        -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.25);
        box-shadow: 0 0 1px rgba(255, 255, 255, 0.25);
    }
}

[data-show-arrows="false"] {
    .glider-prev,
    .glider-next {
        @apply hidden;
    }
}

[data-show-dots="false"] {
    .glider-dots {
        @apply hidden;
    }
}