@use "./_variables.scss" as *;

@mixin kendo-captcha--layout() {

    // Captcha
    .k-captcha {
        width: var( --kendo-captcha-width, #{$kendo-captcha-width} );
        box-sizing: border-box;
        font-size: var( --kendo-captcha-font-size, #{$kendo-captcha-font-size} );
        font-family: var( --kendo-captcha-font-family, #{$kendo-captcha-font-family} );
        line-height: var( --kendo-captcha-line-height, #{$kendo-captcha-line-height} );
        display: flex;
        flex-flow: column nowrap;
        gap: var( --kendo-captcha-spacing, #{$kendo-captcha-spacing} );

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }
    }

    // Image
    .k-captcha-image-wrap {
        position: relative;
        gap: var( --kendo-captcha-image-wrap-spacing, #{$kendo-captcha-image-wrap-spacing} );
    }

    .k-captcha-image-controls {
        position: relative;
        gap: var( --kendo-captcha-image-controls-spacing, #{$kendo-captcha-image-controls-spacing} );
    }

    .k-captcha-image {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .k-captcha-image > img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    // Loading
    .k-captcha-loading .k-captcha-image {
        height: auto;
    }

    // Volume Control
    .k-captcha-volume-control {
        height: 100%;
    }

    // Verification Success
    .k-captcha-validation-message {
        margin-block-start: var( --kendo-captcha-validation-offset-y, #{$kendo-captcha-validation-offset-y} );
        font-size: var( --kendo-captcha-validation-font-size, #{$kendo-captcha-validation-font-size} );
    }

}