/* Full-page forms */

.form {
    form {
        & > div:not(:last-child):not(.editor-toolbar) {
            margin-bottom: 16px;
        }

        label {
            display: inline-block;
            margin: 0 5px 4px 0;

            & + .desc {
                margin: 0 0 4px 0;
                font-size: 80%;
                opacity: .75;
            }
        }

        .avatar {
            width: 128px; height: 128px;

            & + input[type="file"] {
                margin: 16px 0 0 0;
                vertical-align: middle;
            }
        }
    }

    input[type='text'],
    input[type='email'],
    input[type='date'],
    input[type='password'],
    input[type='search'],
    textarea,
    select {
        display: block;
        width: 100%; padding: 6px 8px;
        background: var(--background); color: var(--text);
        border: var(--border);

        /* Transitions when resizing with the mouse produces apparent lag */
        transition: all .15s ease, width 0s, height 0s;

        &:focus {
            border-color: var(--border-focused);
            box-shadow: 0 0 0 3px var(--shadow-focused);
        }

        &:focus-within {
            /* Override an annoying Firefox default */
            outline: none;
        }
    }

    input[type='checkbox'],
    input[type='radio'] {
        display: inline;
        vertical-align: middle;
        margin: 0 4px 0 0;
    }

    textarea {
        max-width: 100%;
        resize: vertical;
    }

    select {
        width: auto;
    }

    progress.entropy {
        display: none; /* Display with Js enabled */
        width: 100%; margin-top: 5px;
        background: var(--background);
        border: var(--border);

        &.low {
            &::-moz-progress-bar,
            &::-webkit-progress-bar {
                background: var(--error);
            }
        }
        &.medium {
            &::-moz-progress-bar,
            &::-webkit-progress-bar {
                background: var(--warn);
            }
        }
        &.high {
            &::-moz-progress-bar,
            &::-webkit-progress-bar {
                background: var(--ok);
            }
        }
    }

    hr {
        height: 3px;
        border: var(--hr-border);
        border-width: 1px 0;
        margin: 24px 0;
    }

    .msgerror {
        color: var(--error);
        font-weight: 400;
        margin-top: 5px;
    }

    /* anti-bots field */
    .abfield {
        display: none;
    }
}


/* Interactive filter forms */

.form.filter {
    margin-bottom: 16px;

    & > p:first-child {
        font-size: 80%;
        color: gray;
        margin-bottom: 2px;
    }

    input {
        font-family: monospace;
    }

    .syntax-explanation {
        font-size: 80%;
        color: gray;
        margin-top: 8px;

        ul {
            font-size: inherit;
            color: inherit;
            padding-left: 16px;
            line-height: 20px;
            margin-top: 2px;
        }

        code {
            background: rgba(0,0,0,.05);
            padding: 1px 2px;
            border-radius: 2px;
        }
    }
}