@charset "UTF-8";

/* =====================================================================
   OLLATOEDU ECOSYS
   Flash Message Component
   =====================================================================

   File:
   assets/css/components/flash-message.css

   Phase:
   Phase 6 - Component CSS

   Purpose:
   - Style temporary system notifications
   - Support success, information, warning, error and security messages
   - Support icon, message and dismiss control
   - Support stacked notification areas
   - Support automatic-dismiss progress indication
   - Support accessible focus states
   - Support mobile presentation
   - Support reduced motion and forced colours
   - Hide transient notifications in print where appropriate

   Dependencies:
   - assets/css/style.css
   - assets/css/website.css
   - assets/css/responsive.css

   Component markup will later be rendered by:
   website/components/flash-message.php

   Behaviour will later be implemented by:
   assets/js/components/flash-message.js
   ===================================================================== */


/* =====================================================================
   1. FLASH REGION
   ===================================================================== */

.flash-region {
    position: fixed;

    top:
        max(
            var(--space-5),
            env(safe-area-inset-top, 0px)
        );

    right:
        max(
            var(--space-5),
            env(safe-area-inset-right, 0px)
        );

    z-index: var(--z-toast);

    display: flex;
    flex-direction: column;

    gap: var(--space-3);

    width:
        min(
            calc(100vw - (var(--space-5) * 2)),
            26rem
        );

    pointer-events: none;
}


/* =====================================================================
   2. INLINE REGION VARIANT
   ===================================================================== */

.flash-region--inline {
    position: static;

    width: 100%;

    margin-block:
        var(--space-4);

    pointer-events: auto;
}


/* =====================================================================
   3. FLASH MESSAGE ROOT
   ===================================================================== */

.flash-message {
    position: relative;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: start;

    gap: var(--space-3);

    width: 100%;

    padding:
        var(--space-4);

    color: var(--color-text);
    background-color: var(--color-white);

    border:
        var(--border-width)
        solid
        var(--color-border);

    border-left-width: 4px;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-lg);

    overflow: hidden;

    pointer-events: auto;

    opacity: 1;

    transform: translateY(0);

    transition:
        opacity var(--transition-base),
        transform var(--transition-base),
        visibility var(--transition-base);
}


/* =====================================================================
   4. ENTERING STATE
   ===================================================================== */

.flash-message.is-entering {
    opacity: 0;

    transform:
        translateY(-0.75rem);
}


/* =====================================================================
   5. EXITING STATE
   ===================================================================== */

.flash-message.is-exiting {
    opacity: 0;

    transform:
        translateY(-0.5rem);

    pointer-events: none;
}


/* =====================================================================
   6. HIDDEN STATE
   ===================================================================== */

.flash-message[hidden],
.flash-message.is-hidden {
    display: none !important;
}


/* =====================================================================
   7. ICON
   ===================================================================== */

.flash-message__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 1.5rem;
    height: 1.5rem;

    margin-top: 0.05rem;

    color: currentColor;
}


.flash-message__icon svg {
    width: 100%;
    height: 100%;
}


/* =====================================================================
   8. CONTENT
   ===================================================================== */

.flash-message__content {
    min-width: 0;
}


/* =====================================================================
   9. TITLE
   ===================================================================== */

.flash-message__title {
    margin:
        0
        0
        var(--space-1);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);

    color: var(--color-heading);
}


/* =====================================================================
   10. MESSAGE
   ===================================================================== */

.flash-message__text {
    margin: 0;

    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);

    color: var(--color-text);
}


/* =====================================================================
   11. CONTENT LINKS
   ===================================================================== */

.flash-message__text a {
    color: inherit;

    font-weight: var(--font-weight-semibold);

    text-decoration: underline;
    text-underline-offset: 0.16em;
}


.flash-message__text a:hover {
    text-decoration-thickness: 2px;
}


/* =====================================================================
   12. CLOSE BUTTON
   ===================================================================== */

.flash-message__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 2rem;
    height: 2rem;

    margin:
        -0.3rem
        -0.3rem
        0
        0;

    padding: 0;

    color: var(--color-grey-600);
    background: transparent;

    border: 0;
    border-radius: var(--radius-sm);

    cursor: pointer;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}


.flash-message__close:hover {
    color: var(--color-grey-900);
    background-color: rgb(15 23 42 / 0.06);
}


.flash-message__close:focus-visible {
    outline:
        3px
        solid
        rgb(33 111 219 / 0.22);

    outline-offset: 2px;
}


/* =====================================================================
   13. CLOSE ICON
   ===================================================================== */

.flash-message__close-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 1rem;
    height: 1rem;
}


.flash-message__close-icon svg {
    width: 100%;
    height: 100%;
}


/* =====================================================================
   14. SUCCESS
   ===================================================================== */

.flash-message--success {
    color: var(--color-success-700);

    background-color: var(--color-success-50);

    border-color: var(--color-success-200);
    border-left-color: var(--color-success-600);
}


.flash-message--success
.flash-message__title {
    color: var(--color-success-800);
}


.flash-message--success
.flash-message__text {
    color: var(--color-success-800);
}


/* =====================================================================
   15. INFORMATION
   ===================================================================== */

.flash-message--info {
    color: var(--color-primary-700);

    background-color: var(--color-primary-50);

    border-color: var(--color-primary-200);
    border-left-color: var(--color-primary-600);
}


.flash-message--info
.flash-message__title {
    color: var(--color-primary-800);
}


.flash-message--info
.flash-message__text {
    color: var(--color-primary-800);
}


/* =====================================================================
   16. WARNING
   ===================================================================== */

.flash-message--warning {
    color: var(--color-warning-700);

    background-color: var(--color-warning-50);

    border-color: var(--color-warning-200);
    border-left-color: var(--color-warning-600);
}


.flash-message--warning
.flash-message__title {
    color: var(--color-warning-800);
}


.flash-message--warning
.flash-message__text {
    color: var(--color-warning-800);
}


/* =====================================================================
   17. ERROR
   ===================================================================== */

.flash-message--error {
    color: var(--color-error-700);

    background-color: var(--color-error-50);

    border-color: var(--color-error-200);
    border-left-color: var(--color-error-600);
}


.flash-message--error
.flash-message__title {
    color: var(--color-error-800);
}


.flash-message--error
.flash-message__text {
    color: var(--color-error-800);
}


/* =====================================================================
   18. SECURITY
   ===================================================================== */

.flash-message--security {
    color: #7c2d12;

    background-color: #fff7ed;

    border-color: #fed7aa;
    border-left-color: #c2410c;
}


.flash-message--security
.flash-message__title {
    color: #7c2d12;
}


.flash-message--security
.flash-message__text {
    color: #7c2d12;
}


/* =====================================================================
   19. AUTO-DISMISS PROGRESS
   ===================================================================== */

.flash-message__progress {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

    overflow: hidden;

    background-color:
        rgb(15 23 42 / 0.06);
}


/* =====================================================================
   20. PROGRESS BAR
   ===================================================================== */

.flash-message__progress-bar {
    width: 100%;
    height: 100%;

    background-color: currentColor;

    transform-origin: left center;

    transform: scaleX(1);
}


/* =====================================================================
   21. AUTO-DISMISS ANIMATION
   =====================================================================

   JavaScript can set:

   --flash-duration: 5000ms;

   and add:

   .is-counting
   ===================================================================== */

.flash-message.is-counting
.flash-message__progress-bar {
    animation:
        ollatoedu-flash-progress
        var(--flash-duration, 5000ms)
        linear
        forwards;
}


@keyframes ollatoedu-flash-progress {

    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}


/* =====================================================================
   22. PAUSED AUTO-DISMISS
   ===================================================================== */

.flash-message.is-paused
.flash-message__progress-bar {
    animation-play-state: paused;
}


/* =====================================================================
   23. STATIC MESSAGE VARIANT
   ===================================================================== */

.flash-message--static {
    box-shadow: var(--shadow-sm);
}


.flash-message--static
.flash-message__progress {
    display: none;
}


/* =====================================================================
   24. COMPACT VARIANT
   ===================================================================== */

.flash-message--compact {
    padding: var(--space-3);

    gap: var(--space-2);
}


.flash-message--compact
.flash-message__icon {
    width: 1.25rem;
    height: 1.25rem;
}


.flash-message--compact
.flash-message__title,
.flash-message--compact
.flash-message__text {
    font-size: var(--font-size-xs);
}


/* =====================================================================
   25. ACTION AREA
   ===================================================================== */

.flash-message__actions {
    grid-column:
        2 / -1;

    display: flex;
    flex-wrap: wrap;

    gap: var(--space-2);

    margin-top: var(--space-2);
}


/* =====================================================================
   26. ACTION LINK / BUTTON
   ===================================================================== */

.flash-message__action {
    display: inline-flex;
    align-items: center;

    min-height: 2rem;

    padding:
        var(--space-1)
        var(--space-2);

    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);

    color: inherit;

    background: transparent;

    border:
        var(--border-width)
        solid
        currentColor;

    border-radius: var(--radius-sm);

    cursor: pointer;
}


.flash-message__action:hover {
    background-color:
        rgb(255 255 255 / 0.45);

    text-decoration: none;
}


/* =====================================================================
   27. STACKING
   ===================================================================== */

.flash-region
.flash-message {
    flex: 0 0 auto;
}


/* =====================================================================
   28. LONG CONTENT SAFETY
   ===================================================================== */

.flash-message__title,
.flash-message__text {
    overflow-wrap: anywhere;
}


/* =====================================================================
   29. MOBILE
   ===================================================================== */

@media (max-width: 47.9375rem) {

    .flash-region {
        top:
            max(
                var(--space-3),
                env(safe-area-inset-top, 0px)
            );

        right:
            max(
                var(--space-3),
                env(safe-area-inset-right, 0px)
            );

        left:
            max(
                var(--space-3),
                env(safe-area-inset-left, 0px)
            );

        width: auto;
    }


    .flash-message {
        padding:
            var(--space-3);

        gap:
            var(--space-2);

        border-radius:
            var(--radius-md);
    }


    .flash-message__icon {
        width: 1.35rem;
        height: 1.35rem;
    }


    .flash-message__close {
        width: 2.25rem;
        height: 2.25rem;
    }
}


/* =====================================================================
   30. VERY SMALL MOBILE
   ===================================================================== */

@media (max-width: 23.9375rem) {

    .flash-message {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto;

        padding:
            var(--space-3);
    }


    .flash-message__title,
    .flash-message__text {
        font-size:
            var(--font-size-xs);
    }
}


/* =====================================================================
   31. HOVER-CAPABLE DEVICES
   ===================================================================== */

@media (hover: hover) and (pointer: fine) {

    .flash-message:hover {
        box-shadow:
            0 14px 36px
            rgb(15 23 42 / 0.14);
    }
}


/* =====================================================================
   32. REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {

    .flash-message,
    .flash-message__close {
        transition: none;
    }


    .flash-message.is-entering,
    .flash-message.is-exiting {
        transform: none;
    }


    .flash-message.is-counting
    .flash-message__progress-bar {
        animation: none;

        transform: none;
    }
}


/* =====================================================================
   33. FORCED COLOURS / HIGH CONTRAST
   ===================================================================== */

@media (forced-colors: active) {

    .flash-message {
        color: CanvasText;
        background: Canvas;

        border:
            2px
            solid
            CanvasText;

        box-shadow: none;
    }


    .flash-message__title,
    .flash-message__text,
    .flash-message__icon {
        color: CanvasText;
    }


    .flash-message__close {
        color: ButtonText;
    }


    .flash-message__progress-bar {
        background: Highlight;
    }


    .flash-message__close:focus-visible {
        outline-color: Highlight;
    }
}


/* =====================================================================
   34. PRINT
   ===================================================================== */

@media print {

    .flash-region {
        display: none !important;
    }


    .flash-message {
        display: none !important;
    }
}


/* =====================================================================
   END OF OLLATOEDU ECOSYS FLASH MESSAGE COMPONENT
   ===================================================================== */