noydb/oworms-ui

@use '../../../style/colour' as colour;
@use '../../../style/mixin' as mxn;

h5 {
    margin-top: 2rem;
    padding-bottom: 16px;
    text-align: center;

    &.hidden {
        display: none;
    }
}

form {
    width: 100%;
    padding: 2rem;

    &.hidden {
        display: none;
    }

    > div {

        > fieldset {
            padding-left: 1rem;
            padding-right: 1rem;

            // error message
            > span {
                opacity: 0;
                display: block;
                color: colour.$error;
                @include mxn.transition;
                font-size: .7rem;

                &.show {
                    opacity: 1;
                    margin-top: .5rem;
                    margin-left: .1rem;
                }
            }

            > textarea {
                height: 100px;
            }
        }
    }
}

div#actions {
    margin: 2rem;

    &.hidden {
        display: none;
    }
}

@media screen and (min-width: 920px) {
    h5, form {
        margin-left: 25%;
        margin-right: 25%;
    }

    h5 {
        text-align: left;
        margin-left: 26%;
    }

    form {
        width: auto;
        padding: 0;
        display: flex;
        justify-content: space-between;

        > div {
            width: 48%;

            > fieldset {
                width: 100%;
                margin-top: 1.2rem;
                margin-bottom: 1.2rem;

                > textarea {
                    height: auto;
                }
            }
        }
    }

    div#actions {
        width: 30%;
        margin: 2rem auto auto;
    }
}