.lk-live--updates {
    border-left: 1px solid var(--carnation-500);
    margin-left: 1rem;
    padding-left: 1rem;
    padding-top: 1rem;
}

.lk-live--status-badge {
    animation: pulse 1s ease-in-out infinite;
}

.lk-live--published-published {
  /*background-color: red!important;*/
}

.lk-live--published-unpublished {
  /*background-color: magenta!important;*/
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.lk-live--updates {

    .live-actions,
    .live-update-actions {
        display: flex;
        gap: 0.5rem;
    }

    .button {
        font-size: var(--gin-font-size-s);
        padding-block: calc(var(--gin-spacing-s) - 2px);
        padding-inline: var(--gin-spacing-m);
        border: 2px solid var(--gin-color-primary) !important;
        border-radius: var(--gin-border-m);
        box-shadow: 0 1px 2px var(--gin-color-primary-light);
        transition: var(--gin-transition);
    }

    .button:hover {
        background-color: var(--gin-color-primary-hover);
        color: var(--gin-color-button-text);
    }

    .button--primary {
        background-color: var(--gin-color-primary);
        color: var(--gin-color-button-text);
    }

    .button--danger {
        border-color: var(--gin-color-danger) !important;
        color: var(--gin-color-danger);
        box-shadow: 0 1px 2px var(--gin-color-danger-lightest);
    }

    .button--danger:hover {
        background-color: var(--gin-color-danger);
        color: var(--gin-color-button-text);
    }

}