[data-element="floatingSection"] {
    width: 100%;
    display: none;
    z-index: 100;
    position: var(--floatingsection-position);
    top: var(--floatingsection-top);
    bottom: var(--floatingsection-bottom);
    left: var(--floatingsection-left);
    right: var(--floatingsection-right);
    order: var(--floatingsection-order);
    z-index: var(--floatingsection-zindex);
    max-width: 100%;
    width: var(--floatingsection-width);
    height: var(--floatingsection-height);

    &.fs-scrollable {
        .wtps-floatingSection-wrapper {
            overflow-y: auto;
        }
    }
}

html:has(.fs-open) {
    overflow: hidden;
}

[data-element="floatingSection"].is-open {
    display: flex;
}

.wtps-floatingSection-wrapper {
    width: 100%;
    height: 100%;
    padding: var(--floatingsection-padding);
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.wtps-floatingSection-container {
    width: 100%;
    min-height: 100%;
    border-radius: var(--floatingsection-borderradius);
    background-color: var(--floatingsection-bgcolor);
    box-shadow: var(--floatingsection-boxshadow);
}

[data-element="floatingSection"].fs-scroll-hidden .wtps-floatingSection-wrapper {
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.fs-scrolling {
    position: var(--floatingsection-scroll-position);
    .wtps-floatingSection-wrapper {
        padding: var(--floatingsection-scroll-padding);
    }
    .wtps-floatingSection-container {
        border-radius: var(--floatingsection-scroll-borderradius);
        background-color: var(--floatingsection-scroll-bgcolor);
        box-shadow: var(--floatingsection-scroll-boxshadow);
    }
}

/* Entrance effects for floatingSection */
[data-element="floatingSection"].is-open {
    opacity: 1;
    transition: display var(--floatingsection-effect-duration) ease allow-discrete;
    transition-delay: var(--floatingsection-effect-duration);

    @starting-style {
        opacity: 0;
    }
}

[data-element="floatingSection"] {
    opacity: 0;
    transition: opacity var(--floatingsection-effect-duration) ease,
        display var(--floatingsection-effect-duration) ease allow-discrete;
    transition-delay: var(--floatingsection-effect-duration);
}

/* Sin efecto */
[data-element="floatingSection"]:not([data-effect]),
[data-element="floatingSection"][data-effect="none"] {
    transition: none;
    .wtps-floatingSection-container {
        transition: none;
    }
    &.is-open {
        transition: none;
        .wtps-floatingSection-container {
            transition: none;
        }
    }
}

/* Efecto zoom */
[data-element="floatingSection"][data-effect="zoom"].is-open .wtps-floatingSection-container {
    scale: 1;
    transition: scale var(--floatingsection-effect-duration) ease;

    @starting-style {
        scale: 0;
    }
}

[data-element="floatingSection"][data-effect="zoom"] .wtps-floatingSection-container {
    transition: scale var(--floatingsection-effect-duration) ease,
        display var(--floatingsection-effect-duration) ease allow-discrete;
    scale: 0;
}

/* Efecto fade */
[data-element="floatingSection"][data-effect="fade"].is-open .wtps-floatingSection-container {
    opacity: 1;
    transition: opacity var(--floatingsection-effect-duration) ease;

    @starting-style {
        opacity: 0;
    }
}

[data-element="floatingSection"][data-effect="fade"] .wtps-floatingSection-container {
    transition: opacity var(--floatingsection-effect-duration) ease,
        display var(--floatingsection-effect-duration) ease allow-discrete;
    opacity: 0;
}

/* Efectos slide */
[data-element="floatingSection"][data-effect="slide-top"].is-open .wtps-floatingSection-container {
    transform: translateY(0);
    opacity: 1;
    transition: transform var(--floatingsection-effect-duration) ease, opacity var(--floatingsection-effect-duration) ease;
    @starting-style {
        transform: translateY(-20%);
        opacity: 0;
    }
}
[data-element="floatingSection"][data-effect="slide-top"] .wtps-floatingSection-container {
    transform: translateY(-20%);
    opacity: 0;
    transition: transform var(--floatingsection-effect-duration) ease, opacity var(--floatingsection-effect-duration) ease,
        display var(--floatingsection-effect-duration) ease allow-discrete;
}

[data-element="floatingSection"][data-effect="slide-bottom"].is-open .wtps-floatingSection-container {
    transform: translateY(0);
    opacity: 1;
    transition: transform var(--floatingsection-effect-duration) ease, opacity var(--floatingsection-effect-duration) ease;
    @starting-style {
        transform: translateY(20%);
        opacity: 0;
    }
}
[data-element="floatingSection"][data-effect="slide-bottom"] .wtps-floatingSection-container {
    transform: translateY(20%);
    opacity: 0;
    transition: transform var(--floatingsection-effect-duration) ease, opacity var(--floatingsection-effect-duration) ease,
        display var(--floatingsection-effect-duration) ease allow-discrete;
}

[data-element="floatingSection"][data-effect="slide-left"].is-open .wtps-floatingSection-container {
    transform: translateX(0);
    opacity: 1;
    transition: transform var(--floatingsection-effect-duration) ease, opacity var(--floatingsection-effect-duration) ease;
    @starting-style {
        transform: translateX(-20%);
        opacity: 0;
    }
}
[data-element="floatingSection"][data-effect="slide-left"] .wtps-floatingSection-container {
    transform: translateX(-20%);
    opacity: 0;
    transition: transform var(--floatingsection-effect-duration) ease, opacity var(--floatingsection-effect-duration) ease,
        display var(--floatingsection-effect-duration) ease allow-discrete;
}

[data-element="floatingSection"][data-effect="slide-right"].is-open .wtps-floatingSection-container {
    transform: translateX(0);
    opacity: 1;
    transition: transform var(--floatingsection-effect-duration) ease, opacity var(--floatingsection-effect-duration) ease;
    @starting-style {
        transform: translateX(20%);
        opacity: 0;
    }
}
[data-element="floatingSection"][data-effect="slide-right"] .wtps-floatingSection-container {
    transform: translateX(20%);
    opacity: 0;
    transition: transform var(--floatingsection-effect-duration) ease, opacity var(--floatingsection-effect-duration) ease,
        display var(--floatingsection-effect-duration) ease allow-discrete;
}