/* ************************************************** */
/* #region DIALOG                                     */
/* ************************************************** */

dialog {
    flex-direction: column;
    gap: 1em;
    position: relative;
    padding: 0.5em;
    background-color: var(--bg-color);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-color);
    overflow: visible;
}

dialog:open {
    display: flex;
}

dialog::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--bg-color);
    border: 0;
    border-radius: var(--border-radius);
    pointer-events: none;
    will-change: opacity;
    z-index: -1;
}

dialog::after {
    content: "";
    position: absolute;
    top: var(--shadow-y);
    left: var(--shadow-x);
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: opacity;
    z-index: -2;

    /* ===== Linear Halftone ===== */
    background-image: radial-gradient(
        circle at center,
        var(--border-color) var(--dot-size),
        transparent calc(var(--dot-size) + 0px)
    );
    background-size: var(--dot-space) var(--dot-space);

    /* ===== Hex Halftone ===== */
    background-image:
        radial-gradient(circle at center, var(--border-color) var(--dot-size), transparent calc(var(--dot-size) + 0px)),
        radial-gradient(circle at center, var(--border-color) var(--dot-size), transparent calc(var(--dot-size) + 0px));
    background-size: var(--dot-space) var(--dot-space);
    /* Offset the second gradient by half the spacing */
    background-position:
        0 0,
        calc(var(--dot-space) / 2) calc(var(--dot-space) / 2);
}

dialog::backdrop {
    opacity: 0;
}

dialog .buttons-container {
    justify-content: flex-end;
}

dialog button {
    padding: 0.125em 0.5em;
    border: var(--border-width) solid var(--border-color);
}

dialog button:hover {
    background-color: var(--bg-color-hover);
    color: var(--text-color-hover);
}

dialog button span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.5em;
}

/* #endregion */

.alert-message-dialog {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
}