gpc-alert {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    position: relative;
    border-radius: 1rem;
    padding: 1rem;

    &[flex="items-center"] {
        & .close {
            position: relative;
            top: auto;
            right: 0;
            order: 3;
            margin-left: auto;
        }

        & .copy {
            padding-right: 1rem;
        }
    }

    &[kind="warning"] {
        background-color: hsl(var(--warning-500-hsl) / 0.05);
        color: var(--warning-700);

        & h3 {
            color: var(--warning-800);
        }

        @media (prefers-color-scheme: dark) {
            color: var(--warning-300);
            background-color: hsl(var(--warning-300-hsl) / 0.05);

            & h3 {
                color: var(--warning-300);
            }
        }
    }

    &[kind="danger"] {
        background-color: hsl(var(--danger-500-hsl) / 0.05);
        color: var(--danger-700);

        & h3 {
            color: var(--danger-800);
        }

        @media (prefers-color-scheme: dark) {
            color: var(--danger-300);
            background-color: hsl(var(--danger-400-hsl) / 0.05);

            & h3 {
                color: var(--danger-300);
            }
        }
    }

    &[kind="success"] {
        background-color: hsl(var(--success-500-hsl) / 0.05);
        color: var(--success-700);

        & h3 {
            color: var(--success-800);
        }

        @media (prefers-color-scheme: dark) {
            color: var(--success-300);
            background-color: hsl(var(--success-400-hsl) / 0.05);

            & h3 {
                color: var(--success-300);
            }
        }
    }

    &[kind="info"] {
        background-color: hsl(var(--info-500-hsl) / 0.05);
        color: var(--info-700);

        & h3 {
            color: var(--info-800);
        }

        @media (prefers-color-scheme: dark) {
            color: var(--info-300);
            background-color: hsl(var(--info-400-hsl) / 0.05);

            & h3 {
                color: var(--info-300);
            }

            & button {
                color: var(--info-300);
            }
        }
    }

    & h3 {
        display: block;
        font-weight: var(--font-medium);
        line-height: 1.618;

        &:not(:last-child) {
            margin-bottom: 0.25rem;
        }
    }

    & .copy {
        flex: 1;
        margin: auto;
    }

    & p {
        display: block;
        line-height: 1.375;
        font-size: var(--text-sm);

        &:not(:last-child) {
            margin-bottom: 0.25rem;
        }
    }

    & ul {
        padding-left: 0.5rem;
        margin-left: 0.675rem;

        &:not(:last-child) {
            margin-bottom: 0.25rem;
        }

        & li {
            font-size: var(--text-sm);
            line-height: 1.375;
            list-style-type: disc;
        }
    }

    & i {
        width: 24px;
        height: 24px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin-right: 0.75rem;

        & svg {
            width: 20px;
            height: 20px;
        }
    }

    & .actions {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        width: 100%;
        margin-left: -0.5rem;
        margin-top: 0.5rem;

        & button {
            margin-right: 0.5rem;
        }
    }

    & .close {
        position: absolute;
        top: 0.25rem;
        right: 0.25rem;
        z-index: 10;
    }
}