:root {
    --color-navy: #19132d;
    --color-navy--light: #413e5b;
    --color-yellow: #f6cb00;
    --color-orange: #F09000;
    --color-red: #ff5a51;
    --color-chartreuse: #d3e500;
    --color-blue: #76ccfd;
    --icon-fa-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%2319132d'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
    --icon-fa-align-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M288 64c0 17.7-14.3 32-32 32L32 96C14.3 96 0 81.7 0 64S14.3 32 32 32l224 0c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32L32 352c-17.7 0-32-14.3-32-32s14.3-32 32-32l224 0c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 224c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32L32 480c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E");
    --icon-fa-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/svg%3E");
    ;
    --icon-fa-exclamation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M96 64c0-17.7-14.3-32-32-32S32 46.3 32 64l0 256c0 17.7 14.3 32 32 32s32-14.3 32-32L96 64zM64 480a40 40 0 1 0 0-80 40 40 0 1 0 0 80z'/%3E%3C/svg%3E");
}

.incident-container {
    margin-top: 20px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--color-navy);
    box-shadow: 4px 4px;

    &> :is(div, a) {
        padding: 20px;
        display: block;
    }

    &>.secondary {
        padding-top: 0 !important;
    }

    & a {
        color: #19132d !important;

        &:hover {
            text-decoration: underline;
        }
    }

    & .incident-title {
        background-color: #cfcfd6;

        &.impact-minor {
            background-color: var(--color-yellow);
        }

        &.impact-major {
            background-color: var(--color-orange);
        }

        &.impact-critical {
            background-color: var(--color-red);
        }

        &.impact-maintenance {
            background-color: var(--color-blue);
        }
    }

    & .updates-container {
        padding-left: 55px;

        .update {
            position: relative;
            font-size: 0;

            &>* {
                font-size: 1rem;
            }

            &>strong {
                margin-right: 0.5rem;

                &+a {
                    background: var(--color-navy);
                    color: #fff;
                    line-height: 1.3;
                    display: inline-block;
                    border-radius: 999em;
                    padding: 2px 10px;
                    font-size: 0.875rem;

                    &:hover {
                        background: var(--color-navy--light);
                    }
                }
            }

            &>small {
                font-size: 0.875rem;
            }

            &::before {
                content: '';
                background-color: #cfcfd6;
                background-size: 50%;
                background-repeat: no-repeat;
                background-position: center;
                border-radius: 50%;
                display: block;
                width: 24px;
                height: 24px;
                position: absolute;
                left: -35px;
            }

            &:not(:last-child)::after {
                content: '';
                display: block;
                width: 2px;
                height: 100%;
                position: absolute;
                top: 24px;
                left: -24px;
                background: #cfcfd6;
            }

            &.resolved {
                &::before {
                    background-color: var(--color-chartreuse);
                    background-image: var(--icon-fa-check);
                }
            }

            &.postmortem {
                &::before {
                    background-image: var(--icon-fa-align-left);
                    background-size: 40%;
                }
            }
        }
    }
}

.component-inner-container {
    & .component-status {
        color: var(--color-navy) !important;
        display: flex !important;
        align-items: center;
        gap: 5px;

        &::before {
            content: '';
            background-color: var(--color-navy);
            background-size: 50%;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 50%;
            display: inline-block;
            width: 20px;
            height: 20px;
        }
    }

    &.status-green .component-status::before {
        background-color: var(--color-chartreuse);
        background-image: var(--icon-fa-check);
    }

    &.status-blue .component-status::before {
        background-color: var(--color-blue);
        background-image: var(--icon-fa-gear);
    }

    &:is(.status-yellow, .status-orange, .status-red) .component-status::before {
        background-image: var(--icon-fa-exclamation);
        background-size: auto 50%;
    }

    &.status-yellow .component-status::before {
        background-color: var(--color-yellow);
    }

    &.status-orange .component-status::before {
        background-color: var(--color-orange);
    }

    &.status-red .component-status::before {
        background-color: var(--color-red);
    }
}

.page-status.status-none span,
.layout-content.status.status-index .page-status .status {
    color: var(--color-navy) !important;
    text-shadow: none !important;
    top: 0;
    margin-bottom: 0;
}

.masthead-container .masthead .text-container {
    background: hsl(254deg 41% 13% / 20%) !important;
}

.masthead-container .page-name a {
    color: #19132d !important;
}

.layout-content.status .shared-partial.uptime-90-days-wrapper .legend .spacer {
    background: #E7E7EA;
}

/* Recolor hardcoded SVG fills */
:where(.days, .availability-time-line-graphic) {
    :is(rect[fill="#f2ce00"], rect[fill="#ead400"]) {
        fill: var(--color-yellow);
    }

    rect:not([fill="#d3e500"]) {
        mask-image: repeating-linear-gradient(-60deg,
                    transparent 0,
                    transparent 1px,
                    white 1px,
                    white 2px);
    }
}

/*
 * Index page
 * --------------------------------------------------------------------------- */

body.index.status {
    & :is(.page-status, .layout-content.status.status-index .components-section .components-container) {
        border-radius: 20px !important;
        overflow: hidden;
        border: 1px solid var(--color-navy) !important;
        box-shadow: 4px 4px var(--color-navy) !important;
    }

    & .layout-content.status.status-index .components-section .components-container {
        margin-top: 10px;

        &>div {
            border-inline: 0 !important;

            &:first-child {
                border-top: 0 !important;
            }

            &:last-child {
                border-bottom: 0 !important;
            }
        }
    }
}

/*
 * Incident page
 * --------------------------------------------------------------------------- */

body.incident {
    .page-title .incident-name {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-bottom: 20px;
        color: var(--color-navy) !important;

        &::before {
            content: '';
            display: inline-block;
            width: 1.2em;
            height: 1.2em;
            background: no-repeat var(--icon-fa-exclamation) center / auto 50% #706e84;
            border-radius: 50%;
            flex-shrink: 0;
        }

        &.impact-minor::before {
            background-color: var(--color-yellow);
        }

        &.impact-major::before {
            background-color: var(--color-orange);
        }

        &.impact-critical::before {
            background-color: var(--color-red);
        }

        &.impact-maintenance::before {
            background-color: var(--color-blue);
            background-image: var(--icon-fa-gear);
        }
    }
}

.components-uptime-link a {
    text-decoration: underline;
}