/*
 * TRX messages (trx#76, trx#77): the fixed layer of the message toasts (Trx\Message\Renderer).
 *
 * Small screens (below Bootstrap's lg breakpoint, 992px): one column; every toast takes its
 * place by the class the renderer sets (top, middle, bottom), whatever its position on large
 * screens. From 992px: top row, bottom row, the middle ones centred in the viewport and the
 * bottom right ones placed on their own; centre messages take the width of the page
 * container. The layer starts below the header the site exposes as --navbar-height (or
 * --trx-messages-top) and lets every click outside a toast through.
 */
.trx-messages {
    position: fixed;
    inset: var(--trx-messages-top, var(--navbar-height, 0px)) 0 0;
    /* Above a fixed navbar (Bootstrap's 1030), below offcanvas menus (1040+), the trx consent
       banner (1050) and modals, so the consent choice and the menus stay usable */
    z-index: 1035;
    pointer-events: none;
}

.trx-message {
    pointer-events: auto;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Bootstrap's toast width is --bs-toast-max-width (350px) */
.trx-message--wide {
    --bs-toast-max-width: 100%;
}

.trx-message--small {
    --bs-toast-max-width: 250px;
}

.trx-message--large {
    --bs-toast-max-width: 500px;
}

.trx-message__text > :last-child {
    margin-bottom: 0;
}

/* Links and the toggle in the text colour, marked by the underline: a site's link colour may
   lack contrast on the toast */
.trx-message__text a,
.trx-message__toggle {
    color: inherit;
    text-decoration: underline;
}

/* A plain button, so no site button style reaches it */
.trx-message__toggle {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .875em;
    cursor: pointer;
}

@media (max-width: 991.98px) {
    .trx-messages {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .5rem;
        padding: 1rem calc(var(--bs-gutter-x, 1.5rem) * .5);
    }

    /* The slots of the large layout dissolve; the toasts are items of the column */
    .trx-messages__top,
    .trx-messages__middle,
    .trx-messages__bottom,
    .trx-messages__center,
    .trx-messages__right {
        display: contents;
    }

    .trx-message--sm-top {
        order: 1;
    }

    .trx-message--sm-middle {
        order: 2;
    }

    .trx-message--sm-bottom {
        order: 3;
    }

    .trx-message--sm-push-before {
        margin-top: auto;
    }

    .trx-message--sm-push-after {
        margin-bottom: auto;
    }
}

@media (min-width: 992px) {
    .trx-messages__top,
    .trx-messages__bottom,
    .trx-messages__center,
    .trx-messages__middle,
    .trx-messages__right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .5rem;
    }

    .trx-messages__top {
        position: absolute;
        inset: 0 0 auto;
        padding: 1.5rem 0;
    }

    .trx-messages__bottom {
        position: absolute;
        inset: auto 0 0;
        padding: 1.5rem 0;
    }

    .trx-messages__middle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .trx-messages__right {
        position: absolute;
        right: 1.5rem;
        bottom: 1.5rem;
        align-items: flex-end;
    }
}