/**
 * 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,
    .dialog-contents,
    .dialog-heading,
    .dialog-message,
    .dialog-body,
	.dialog-footer {
        margin-top: 1em;
    }
    dialog .dialog-header-close-button {
       float: right;
    }
    dialog form input,
    dialog form select,
    dialog form textarea {
       width: 100%;
    }
    dialog form textarea {
       height: 240px;
    }
    .dialog-footer {
        display: flex;
        justify-content: center;
        gap: 1em;
    }

    .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,
    .actions .single-action {
        text-indent: initial;
        padding-left: 8px;
    }

}

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

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

}