@use "../../style/var.scss" as variables;

.bgo-signature {
    &__wrapper {
        display: flex;
        flex-direction: row-reverse;
        width: 100%;
        height: 100%;
    }

    &__paper {
        width: calc(100vw - 44px);
        background-color: #FFF;
        background-size: 20px 20px;
        background-image: radial-gradient(circle, #DDD 1px, rgba(0, 0, 0, 0) 1px);
    }

    &__actions {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vh;
        height: 44px;
        display: flex;
        background-color: #f0f0f0;
        transform-origin: 22px 22px;
        transform: rotateZ(90deg);
    }
}

@media (orientation: landscape) {
    .bgo-signature {
        &__wrapper {
            flex-direction: column;
        }

        &__paper {
            width: 100%;
            height: calc(100vh - 44px);
        }

        &__actions {
            width: 100%;
            position: static;
            transform: none;
        }
    }
}