.actions {
    display: flex;
    gap: 16px;

    .button-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        border-radius: 8px;

        &.run {
            .dropdown-menu-button-wrapper {
                background-color: var(--component-bg-accent, #25c2c7);
                
                .dropdown-menu-button {
                    svg {
                        path {
                            fill: var(--text-inverted, #171e21);
                        }
                    }
                }
                
                &:is(.open,:hover) {
                    border-color: var(--border-inverted, #232b2e);
                    .dropdown-menu-button {
                        border-color: var(--border-selected, #005c5f);
                    }
                }
            }
        }

        &.stop {
            .dropdown-menu-button-wrapper {
                background-color: #FF887826;
                
                .dropdown-menu-button {
                    svg {
                        path {
                            fill: var(--feedback-error-default, #ff8878);
                        }
                    }
                }
                
                &:is(.open,:hover) {
                    border-color: var(--feedback-error-default, #ff8878);
                }
            }
        }

        .button {
            border-radius: 8px 0 0 8px;
        }

        .dropdown-menu-button-wrapper {
            width: 20px;
            height: calc(100% - 6px);
            border: 3px solid transparent;
            border-radius: 0 8px 8px 0;
            position: relative;
        }

        .dropdown-menu-button {
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            width: calc(100% + 6px);
            border: 2px solid transparent;
            border-radius: 0 8px 8px 0;
        }

        .dropdown-menu {
            border-radius: 8px;
        }

        .dropdown-menu-item-container {
            height: auto;
            padding-top: 8px;
            padding-bottom: 8px;
        }

        .dropdown-menu-item {
            display: flex;
            gap: 8px;
            flex-direction: column;
        }

        .dropdown-menu-item-title {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;

            svg {
                path {
                    fill: var(--text-default, #ffffff);
                }

                &:last-child {
                    margin-left: auto;
                }
            }
        }

        .dropdown-menu-item-content {
            color: var(--text-subtle, #c9d2d2);
            text-align: left;

            .app-name {
                color: var(--text-accent, #25c2c7);
            }
        }

        .dropdown-menu-list {
            background-color: var(--component-bg-above, #374146);
            border-radius: 8px;
        }
    }

    .running {
        background: var(--component-bg-selected, rgba(37, 194, 199, 0.3)) !important;

        svg {
            animation: spin 1.5s linear infinite;
            pointer-events: none;
        }
    }
}

.status-message {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;

    span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    &.errored {
        color: var(--feedback-error-default, #ff8878);
        svg {
            path {
                fill: var(--feedback-error-default, #ff8878) !important;
            }
        }
    }

    &.succeeded {
        color: var(--feedback-success-default, #16a588);
        svg {
            path {
                color: var(--feedback-success-default, #16a588) !important;
            }
        }
    }

    &.pending {
        color: var(--feedback-neutral-default, #aeb8b8);
        svg {
            animation: spin 1.5s linear infinite;
            path {
                stroke: var(--feedback-neutral-default, #aeb8b8);
            }
        }
    }
}

.hide-after-3s {
    animation: fadeOut 0.5s ease-in-out forwards;
    animation-delay: 3s;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

//Keyframe for fade out, after 3 seconds it should hide in 0.5 seconds
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
