// ==========================================================================
// Admin guided tour - "Aide" trigger button + driver.js theme overrides
// ==========================================================================

@use '../base/variables' as *;

.help-button-container {
    display: flex;
    gap: $spacing-sm;
    justify-content: center;
}

.help-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid $color-primary-dark;
    color: $color-dark;
    font-family: $font-family-sans;
    font-size: $font-size-sm;

    &--link {
        padding: 0 $spacing-sm;
    }

    &:hover {
        background: $color-primary-light;
        cursor: pointer;
    }

    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    &-icon {
        color: $color-primary;
    }
}

// Editor toolbar renders its actions as icon-only pills — match that style
// instead of the text+icon button used on the standalone admin pages.
.editor-toolbar__actions .help-button {
    border: none;
    padding: 0;
    background: transparent;
    color: inherit;

    span:not(.icon) {
        display: none;
    }
}

// driver.js theme overrides to match the admin design system
.driver-popover {
    border-radius: $radius-md;
    font-family: $font-family-sans;
    box-shadow: $shadow;
}

.driver-popover-title {
    color: $color-dark;
    font-size: $font-size-lg;
}

.driver-popover-description {
    color: $color-primary;
}

.driver-popover-progress-text {
    color: $color-primary;
}

.driver-popover-footer button {
    background: $color-primary;
    color: $color-light;
    text-shadow: none;
    border-radius: $radius-sm;
    font-family: $font-family-sans;

    &:hover {
        background: $color-primary-dark;
    }
}

.driver-popover-close-btn {
    color: $color-primary;
}