/**
 * Manage dialog, messages and actions.
 *
 * Some parts are adapted from omeka css.
 */

@media all {

    [hidden],
    .hidden {
        display: none;
    }

    /** Messages */

    div[role="main"] > .messages {
        margin-bottom: 12px;

        & li {
            margin: 0 0 6px;
        }
        & .error {
            background-color: #f4b4b4
        }
        & .success {
            background-color: #cdffcd
        }
        & .warning {
            background-color: #fff6e6
        }
        & a {
            text-decoration: underline;
        }
    }

    .messages {
        padding: 0;
        margin: 0;
        clear: both;

        & li {
            background-color: rgba(255,255,255,.5);
            border-radius: 3px;
            padding: 6px 10px;
            margin-top: 6px;
            display: block;
            width: 100%;
        }
    }

    .field .messages {
        width: 70%;
        color: lighten(#a91919, 45%);
        margin-left: auto;

        & li {
            box-shadow: 0 0 0 1px inset;
        }
    }

    .error,
    .error a {
        color: lighten(#a91919, 45%);;
    }
    .success,
    .success a {
        color: green;
    }
    .warning,
    .warning a {
        color: orange;
    }

    /** Dialog */

    #content dialog {
        margin: auto;
    }
    .dialog-header {
        position: relative;
        min-height: 2em;
    }
    .dialog-contents,
    .dialog-heading,
    .dialog-message,
    .dialog-body,
	.dialog-footer {
        margin-top: 1em;
    }
    dialog .dialog-header-close-button {
        position: absolute;
        top: 0.5em;
        right: 0.5em;
        background: inherit;
    }
    .dialog-close-label {
        font-size: 0.85em;
    }
    .dialog-heading {
        font-size: 1.25em;
        font-weight: bold;
        text-align: center;
    }
    dialog form {
        & input,
        & select,
        & textarea {
            width: 100%;
        }
        & textarea {
            height: 240px;
        }
    }
    .dialog-footer {
        display: flex;
        justify-content: center;
        gap: 1em;
        text-align: center;
    }
    dialog.dialog-common .dialog-footer {
        display: flex;
        justify-content: center;
        gap: 1em;
    }

    /** Form dialogs: add class "dialog-form" to any dialog wrapping a form. */

    dialog.dialog-form,
    dialog.dialog-generic:has(.dialog-textarea) {
        width: inherit;
        max-width: 800px;
    }
    dialog.dialog-form .dialog-body textarea,
    dialog.dialog-generic:has(.dialog-textarea) .dialog-textarea {
        width: 100%;
        box-sizing: border-box;
    }
    /* Checkboxes/radios keep their natural size, not the 100% width above. */
    dialog.dialog-form {
        /* Inline grouped radio/checkbox options, overriding core. */
        .inputs label,
        & label:has(input[type=radio]),
        & label:has(input[type=checkbox]) {
            display: inline-block;
            width: auto;
            margin-right: 1em;
        }
        & input[type=checkbox],
        & input[type=radio] {
            width: auto;
        }
        /* Submit row aligned right, without the empty meta column. */
        & button[name=submit],
        & input[name=submit],
        & .dialog-header-close-button {
            float: right;
        }
        & .field:has(button[name=submit]) .field-meta,
        & .field:has(input[name=submit]) .field-meta {
            display: none;
        }
    }

    .is-busy span.fas:not(.fa-spin):first-child {
        display: none;
    }
    a .spinner,
    input .spinner,
    button .spinner,
    .is-busy span.fas:first-child {
        margin-left: 1em;
    }
    a span span.fas:first-child + .spinner,
    input span.fas:first-child + .spinner,
    button span.fas:first-child + .spinner {
        margin-left: inherit;
    }
    .icons-only a .spinner,
    .icons-only input .spinner,
    .icons-only button .spinner,
    a .spinner.icon-only,
    input .spinner.icon-only,
    button .spinner.icon-only {
        margin-left: inherit;
    }
    /* Icon-only buttons: spinner replaces icon without margin */
    button.is-busy:has(> span.fas:only-of-type) .spinner,
    a.is-busy:has(> span.fas:only-of-type) .spinner {
        margin-left: 0;
    }
    /* Fallback for browsers without :has() support */
    .single-action.is-busy .spinner {
        margin-left: 0;
    }

    /** Actions */

    /* Fix omeka text-indent -9999px for single buttons, that are not used in omeka for now. */
    .actions {
        & .no-action,
        & .single-action {
            text-indent: initial;
            padding-left: 8px;
        }
        /* Center action-bar icons (no margin) so glyphs of different widths align
        and spacing stays even across spans, buttons and links. */
        & .single-action span.fas,
        & .no-action span.fas {
            display: block;
            width: 100%;
            text-align: center;
            margin-left: 0;
            margin-right: 0;
        }
    }
}

@media screen and (max-width:640px) {

    div[role="main"] > .messages {
        margin-top: 24px;
    }

}