@full-height-fixed-width: 946px;

.expander-wrapper {
    position: relative;

    &.full-height-fixed {
        position: fixed;
        top: 0;
        left:~"calc((100% - @{full-height-fixed-width})/2)";
        height: 100vh;
        width: @full-height-fixed-width;
        margin-left: auto;
        margin-right: auto;
        z-index: @zindex-fixed;
        padding: 10px;
        .border-radius(4px);
        background-color: var(--white);
        border: 1px solid color-mix(in srgb, white 30%, var(--border-200));

        @media only screen and (max-width : 946px) {
            width: 100%;
            left: 0;
        }
    }

    .expand-control {
        cursor: pointer;
        position: absolute;
        right: 4px;
        top: 4px;
        height: 30px;
        width: 30px;
        .border-radius(6px);
        background-color: var(--bg-50);
        padding: 6px;
        font-size: @font-size;
        .box-shadow(-2px 2px 4px 0 rgba(var(--black-rgb), 0.2));
        z-index: 2;
        text-align: center;

        &-dark {
            background-color: rgba(var(--black-rgb), 0.53);

            .icon:before {
                color: var(--text-600);
            }
        }
    }
}

.iframe-wrapper {
    .iframe-container {
        .expander-wrapper {
            margin-top: -56.25%;

            &.full-height-fixed {
                margin-top: 0;
            }
        }
    }
}