@use "./abstracts/mixins" as *;
@use "./abstracts/vars" as *;
@use "./styles/flip" as *;

.flip {
    background: $flip-bg;
    perspective: 1000;

    h2 {
        margin-bottom: 5px;
    }

    .Side1,
    .Side0,
    .Side0_EDIT,
    .Side1_EDIT {
        background: $flip-slides-bg;
        width: 96%;
        padding: 2%;
        @include clearfix();
    }

    .Side1_EDIT {
        margin-top: 5px;
    }

    .flipsides {
        position: relative;
        word-wrap: break-word;
    }

    .Side1,
    .Side0 {
        @include border-basic();
        box-sizing: border-box;
        backface-visibility: hidden;
        transition-property: transform;
        transition-duration: 1s;
        transition-timing-function: ease-in;
        transform-style: preserve-3d;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        cursor: pointer;
        width: 100%;

        .slide-heading,
        .slide-content {
            @include clearfix();
        }
    }

    .Side1 {
        transform: rotateY(180deg);
        animation: slide0hide 1s ease-in 1s forwards;
    }

    &.active {
        .Side0 {
            transform: rotateY(180deg);
            animation: slide0hide 1s ease-in 1s forwards;
        }

        .Side1 {
            transform: rotateY(360deg);
            animation: slide1show 0s ease-in 1s forwards;
        }
    }
}
.no-csstransforms3d {
    .flip {
        .Side1 {
            display: none;
        }
        &.active {
            .Side0 {
                display: none;
            }
            .Side1 {
                display: block;
            }
        }
    }
}
.on-page-editor {
    .flipsides {
        height: auto;
        .Side0,
        .Side1 {
            margin-bottom: 10px;
        }
    }
}

@keyframes slide0hide {
    to {
        visibility: hidden;
    }
}

@keyframes slide1show {
    to {
        visibility: visible;
    }
}