.scwriter{
    &-cols{
        display: grid;
        grid-template-columns: 3fr 1fr;
        gap: 20px;
    }

    &-form{
        display: flex;
        flex-direction: column;
        gap: 15px;

        &.--is-loading{
            pointer-events: none;

            .scwriter-loading{
                display: block;
            }

            .button-primary{
                position: relative;
                padding-right: 30px;
            }
        }

        .scwriter-loading{
            display: none;
            color: #ffffff;
            text-indent: -9999em;
            margin: 0;
            position: relative;
            font-size: 3px;
            animation-delay: -0.16s;
            position: absolute;
            top: calc(50% + 2px);
            right: 4.5em;
            transform: translate3d(0px, -50%, 0px);

            &,
            &:before,
            &:after {
                background: #ffffff;
                animation: load1 1s infinite ease-in-out;
                width: 1em;
                height: 4em;
            }

            &:before,
            &:after {
                position: absolute;
                top: 0;
                content: '';
            }
            &:before {
                left: -1.5em;
                animation-delay: -0.32s;
            }
            &:after {
                left: 1.5em;
            }
            &{
                animation-delay: -0.16s;
            }

        }

        &-holder{

        }
        &-row{
            small{
                display: block;
            }
        }

        label{
            display: block;
            margin-bottom: 5px;
            cursor: pointer;
            font-weight: 700;

            sup{
                color: red;
            }
        }

        &-label{
            display: flex;
            gap: 1em;
            align-items: center;
            margin-bottom: 5px;

            label{
                margin-bottom: 0;
            }
        }

        &-hint{
            position: relative;
            display: flex;
            align-items: center;

            &-opener{
                border: 0;
                background-color: transparent;
                cursor: pointer;
                width: 1.25em;
                height: 1.25em;
                padding: 0;
                outline: none;
                transition: opacity 0.3s ease;
                
                svg{
                    width: 100%;

                    path{
                        fill: blue;
                    }
                }

                &:hover{
                    opacity: 0.75;
                }
            }

            &-closer{
                position: absolute;
                top: 3px;
                right: 3px;
                border: 0;
                background: transparent;
                cursor: pointer;
                padding: 0;
                width: 1em;
                height: 1em;
                display: flex;
                align-items: center;
                transition: opacity 0.3s ease;

                svg{
                    width: 100%;

                    path{
                        fill: blue;
                    }
                }


                &:hover{
                    opacity: 0.75;
                }
            }

            &-content{
                position: absolute;
                top: 0;
                left: 0;
                background: #fff;
                padding: 5px 17px 5px 8px;
                border-radius: 5px;
                width: 200px;
                color: #000;
                border: 1px solid #999;
                box-shadow: 3px 3px 5px rgba(0,0,0,0.25);
                display: none;
                box-sizing: border-box;

                &.--show{
                    display: block;
                }
            }
        }

        input:not([type=checkbox]):not([type=radio]),
        textarea{
            width: 100%;
            display: block;
        }

        &-radio{
            display: flex;
            align-items: center;
            gap: 5px;

            &-holder{
                display: flex;
                gap: 20px;
                align-items: center;
            }

            label{
                font-weight: 400;
            }
        }

        &-checkbox{
            display: flex;
            align-items: center;
            gap: 5px;

            label{
                font-weight: 400;
            }
        }

        h2{
            margin-bottom: 0;
        }

    }
}

@-webkit-keyframes load1 {
    0%,
    80%,
    100% {
        box-shadow: 0 0;
        height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}
@keyframes load1 {
    0%,
    80%,
    100% {
        box-shadow: 0 0;
        height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}