.as-notification {
    box-sizing: border-box;
    display: grid;
    align-items: start;
    grid-template-columns: 62px min-content 1fr;
    grid-template-rows: min-content min-content;
    column-gap: var(--as-content-spacing-smaller);
    row-gap: var(--as-content-spacing-smallest);
    background-color: var(--as-color-background-surface);
    line-height: var(--as-default-font-size);
    min-height: 54px;

    .status-indicator {
        width: 3px;
        height: 100%;
        background-color: var(--as-color-status-blue-primary);
        border-radius: var(--as-border-radius);
        grid-row: 1 / 3;

        &.alert {
            background-color: var(--as-color-status-yellow-primary);
        }

        &.warning {
            background-color: var(--as-color-status-red-primary);
        }
    }

    .title-row {
        display: flex;
        justify-content: space-between;
        align-items: start;

        .title-wrapper {
            display: flex;
            align-items: center;
            gap: var(--as-content-spacing-smallest);
        }

        .info {
            display: flex;
            align-items: center;
            gap: var(--as-content-spacing-smallest);

            .date {
                color: var(--as-color-text-secondary);
            }

            .square {
                height: 8px;
                width: 8px;
                background-color: var(--as-color-status-blue-primary);
                border-radius: 2px;

                &.alert {
                    background-color: var(--as-color-status-yellow-primary);
                }

                &.warning {
                    background-color: var(--as-color-status-red-primary);
                }
            }
        }

    }

    .message-row {
        display: flex;
        justify-content: space-between;
        gap: var(--as-content-spacing-smaller);
        align-items: start;

        .message {
            word-break: break-word;
        }
    }

    .sub-header {
        grid-row: 2;
    }

    &.card {
        width: 100%;
        padding: var(--as-content-spacing-smaller) var(--as-content-spacing-smaller);
        border: 1px solid var(--as-color-borders);
        border-radius: var(--as-border-radius);
        cursor: pointer;

        &.alert {
            background-color: var(--as-color-status-yellow-tertiary);
        }

        &.warning {
            background-color: var(--as-color-status-red-tertiary);
        }
    }
}