/**
 * Qvio Floating Button - Button Styles
 *
 * Styles for the floating action button.
 * These styles are loaded on both frontend and editor.
 *
 * @package Qvio_WP
 */

// Base floating button
.qvio-floating-button {
    position: fixed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;

    &:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        background-color: var(--qvio-hover-bg, #005177) !important;
    }

    &:focus {
        outline: 2px solid #fff;
        outline-offset: 2px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(0, 115, 170, 0.3);
    }

    &:active {
        transform: scale(0.98);
    }

    // Dashicons styling
    .dashicons {
        font-size: 24px;
        width: 24px;
        height: 24px;
        line-height: 24px;
        flex-shrink: 0;
    }

    // Custom icon image styling
    &__custom-icon {
        display: block;
        width: 24px;
        height: 24px;
        object-fit: contain;
        flex-shrink: 0;
    }

    // Label text
    &__label {
        white-space: nowrap;
    }

    // Icon-only style (circular FAB)
    &--icon-only {
        border-radius: 50%;
        padding: 0;

        &.qvio-floating-button--small {
            width: 40px;
            height: 40px;

            .dashicons {
                font-size: 20px;
                width: 20px;
                height: 20px;
                line-height: 20px;
            }

            .qvio-floating-button__custom-icon {
                width: 20px;
                height: 20px;
            }
        }

        &.qvio-floating-button--medium {
            width: 56px;
            height: 56px;
        }

        &.qvio-floating-button--large {
            width: 72px;
            height: 72px;

            .dashicons {
                font-size: 32px;
                width: 32px;
                height: 32px;
                line-height: 32px;
            }

            .qvio-floating-button__custom-icon {
                width: 32px;
                height: 32px;
            }
        }
    }

    // Bare icon style (no background, custom sizing)
    &--bare {
        background: transparent !important;
        box-shadow: none;
        padding: 0;
        border-radius: 0;

        // Use custom icon size from CSS variable
        .dashicons {
            font-size: var(--qvio-custom-icon-size, 48px);
            width: var(--qvio-custom-icon-size, 48px);
            height: var(--qvio-custom-icon-size, 48px);
            line-height: var(--qvio-custom-icon-size, 48px);
        }

        .qvio-floating-button__custom-icon {
            width: var(--qvio-custom-icon-size, 48px);
            height: var(--qvio-custom-icon-size, 48px);
        }

        &:hover {
            background: transparent !important;
            box-shadow: none;
            transform: scale(1.1);
            opacity: 0.8;
        }

        &:focus {
            outline: 2px solid currentColor;
            outline-offset: 4px;
            box-shadow: none;
        }
    }

    // Icon + text style (pill/rounded rectangle)
    &--icon-text {
        border-radius: 28px;
        padding: 0 20px;
        gap: 8px;

        &.qvio-floating-button--small {
            height: 40px;
            font-size: 13px;
            padding: 0 16px;

            .dashicons {
                font-size: 18px;
                width: 18px;
                height: 18px;
                line-height: 18px;
            }

            .qvio-floating-button__custom-icon {
                width: 18px;
                height: 18px;
            }
        }

        &.qvio-floating-button--medium {
            height: 56px;
            font-size: 15px;
        }

        &.qvio-floating-button--large {
            height: 72px;
            font-size: 17px;
            padding: 0 28px;
            gap: 12px;

            .dashicons {
                font-size: 28px;
                width: 28px;
                height: 28px;
                line-height: 28px;
            }

            .qvio-floating-button__custom-icon {
                width: 28px;
                height: 28px;
            }
        }
    }

    // Position variants
    &--bottom-right {
        bottom: var(--qvio-offset-y, 24px);
        right: var(--qvio-offset-x, 24px);
    }

    &--bottom-left {
        bottom: var(--qvio-offset-y, 24px);
        left: var(--qvio-offset-x, 24px);
    }

    &--top-right {
        top: var(--qvio-offset-y, 24px);
        right: var(--qvio-offset-x, 24px);
    }

    &--top-left {
        top: var(--qvio-offset-y, 24px);
        left: var(--qvio-offset-x, 24px);
    }

    &--custom {
        // Custom position uses the same offset variables
        // Position is determined by additional inline styles if needed
        bottom: var(--qvio-offset-y, 24px);
        right: var(--qvio-offset-x, 24px);
    }

    // Preview style (not fixed position in editor)
    &--preview {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        top: auto !important;
        left: auto !important;
    }
}

// Responsive adjustments
@media (max-width: 600px) {
    .qvio-floating-button {
        // Reduce size on mobile
        &--icon-text {
            // Convert to icon-only on small screens
            .qvio-floating-button__label {
                display: none;
            }
            border-radius: 50%;
            padding: 0;
            width: auto;
            aspect-ratio: 1;

            &.qvio-floating-button--small {
                width: 40px;
                height: 40px;
            }

            &.qvio-floating-button--medium {
                width: 56px;
                height: 56px;
            }

            &.qvio-floating-button--large {
                width: 64px;
                height: 64px;
            }
        }

        // Reduce offsets on mobile
        &--bottom-right,
        &--bottom-left,
        &--top-right,
        &--top-left,
        &--custom {
            --qvio-offset-x: 16px;
            --qvio-offset-y: 16px;
        }
    }
}

// Screen reader only utility
.qvio-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}