@use '../palettes/brushes' as hues
@use '../palettes/typewriters' as typo
@use '../palettes/stylebook' as book
@use '../palettes/animations' as motion

@media screen
    .error_message
        font-size: clamp(9pt, 2.25vw, typo.$sys-message-font-size)
        font-family: typo.$sys-message-font

    .social_message
        font-size: clamp(10pt, 2.25vw, typo.$socializing-font-size)
        font-family: typo.$journalistic-font

    .message
        background-color: hues.$bg-base-notification
        color: hues.$fg-base-notification
        border-width: book.$message-border-width

        &.error_message
            @include book.set-corners
            background-color: hues.$bg-base-notification
            border: 5px solid hues.$border-base-notification

        body#err_body &.error_message
            @include book.set-corners(5px, 5px, 5px, 5px)
            padding: 3vw
            max-width: 33vw
            margin: 0 auto
            position: relative
            top: 30vh
            transform: rotate(5deg)
            text-overflow: ellipsis
            overflow-y: hidden

            &::before
                content: "1 \a 2 \a 3 \a 4 \a 5 \a 6 \a 7 \a 8 \a 9 \a . \a . \a ."
                font-family: typo.$sys-message-font
                font-size: clamp(9pt, 2.25vw, typo.$sys-message-font-size)
                font-weight: bold
                color: hues.$border-base-notification
                white-space: pre
                position: absolute
                left: 1vw
                top: 3vw

            & > span
                text-overflow: ellipsis
                border-right: 5px solid hues.$border-base-notification
                animation: blink .75s step-end infinite

        body#default_body > &.error_message
            @include book.make-notif

        &.social_message
            @include book.set-corners(50%, 70%, 10%, 30%)

    body#err_body .error_code
        font-size: clamp(16pt, 2.5vw, 24pt)
        font-style: italic
        width: 125px
        height: 125px
        color: hues.$border-helper-base-color
        border: 5px double hues.$border-helper-base-color
        border-radius: 50% 50% / 33% 50% 50%
        position: absolute
        right: 25vw
        top: 25vh
        z-index: 2
        text-align: center
        filter: blur(0.05vw)
        box-shadow: 2px 2px 5px hues.$border-helper-base-color

        & > span
            overflow-wrap: visible
            text-shadow: 2px 2px 5px hues.$border-helper-base-color

@keyframes blink
    @include motion.blinking-border(hues.$border-base-notification)