/**
 * Floating Toolbar Styles
 *
 * Circular floating buttons that stack vertically.
 * Extends toolbar-core.css variables and base styles.
 */

/* Container */
.plexa-toolbar--floating {
    display: flex;
    flex-direction: column;
    gap: var(--plexa-toolbar-gap);
    padding: var(--plexa-toolbar-padding);
}

/* =========================================================================
 * PINNED ITEMS (Always visible)
 * ========================================================================= */

/* Pinned items container */
.plexa-toolbar--floating .plexa-toolbar-pinned {
    display: flex;
    flex-direction: column;
    gap: var(--plexa-toolbar-gap);
}

/* Pinned item buttons - always visible with full opacity */
.plexa-toolbar--floating .plexa-toolbar-pinned .plexa-toolbar-item {
    border-radius: var(--plexa-toolbar-radius-full);
    box-shadow: var(--plexa-toolbar-shadow);
    transform: scale(1);
    opacity: 1;
}

/* Pinned items don't need staggered animation */
.plexa-toolbar--floating .plexa-toolbar-pinned .plexa-toolbar-item.is-pinned {
    transition-delay: 0s;
}

/* With labels - pinned items expand horizontally */
.plexa-toolbar--floating.has-labels .plexa-toolbar-pinned .plexa-toolbar-item {
    width: auto;
    padding: 0 16px;
    border-radius: var(--plexa-toolbar-radius);
}

/* Toggle button (always visible) */
.plexa-toolbar--floating .plexa-toolbar-toggle {
    border-radius: var(--plexa-toolbar-radius-full);
    box-shadow: var(--plexa-toolbar-shadow);
    position: relative;
    z-index: 1;
}

/* Toggle icon rotation */
.plexa-toolbar--floating .plexa-toolbar-toggle-icon {
    transition: transform var(--plexa-toolbar-transition);
}

.plexa-toolbar--floating.is-open .plexa-toolbar-toggle-icon {
    transform: rotate(180deg);
}

/* Items container */
.plexa-toolbar--floating .plexa-toolbar-items {
    display: flex;
    flex-direction: column;
    gap: var(--plexa-toolbar-gap);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--plexa-toolbar-transition),
                visibility var(--plexa-toolbar-transition);
}

.plexa-toolbar--floating.is-open .plexa-toolbar-items {
    opacity: 1;
    visibility: visible;
}

/* Item buttons */
.plexa-toolbar--floating .plexa-toolbar-item {
    border-radius: var(--plexa-toolbar-radius-full);
    box-shadow: var(--plexa-toolbar-shadow);
    transform: scale(0.8);
    opacity: 0;
    transition: transform var(--plexa-toolbar-transition),
                opacity var(--plexa-toolbar-transition),
                background-color var(--plexa-toolbar-transition),
                color var(--plexa-toolbar-transition);
}

.plexa-toolbar--floating.is-open .plexa-toolbar-item {
    transform: scale(1);
    opacity: 1;
}

/* Staggered animation */
.plexa-toolbar--floating.is-open .plexa-toolbar-item:nth-child(1) {
    transition-delay: 0.05s;
}
.plexa-toolbar--floating.is-open .plexa-toolbar-item:nth-child(2) {
    transition-delay: 0.1s;
}
.plexa-toolbar--floating.is-open .plexa-toolbar-item:nth-child(3) {
    transition-delay: 0.15s;
}
.plexa-toolbar--floating.is-open .plexa-toolbar-item:nth-child(4) {
    transition-delay: 0.2s;
}
.plexa-toolbar--floating.is-open .plexa-toolbar-item:nth-child(5) {
    transition-delay: 0.25s;
}

/* With labels - expand horizontally */
.plexa-toolbar--floating.has-labels .plexa-toolbar-item {
    width: auto;
    padding: 0 16px;
    border-radius: var(--plexa-toolbar-radius);
}

/* =========================================================================
 * POSITION: Middle Right (default)
 * ========================================================================= */
.plexa-toolbar--middle-right {
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

/* Adjust for admin bar */
body.admin-bar .plexa-toolbar--middle-right {
    top: calc(50% + 16px);
}

/* Toggle arrow points left (toward page) */
.plexa-toolbar--middle-right .plexa-toolbar-toggle-icon {
    transform: rotate(0deg);
}

.plexa-toolbar--middle-right.is-open .plexa-toolbar-toggle-icon {
    transform: rotate(180deg);
}

/* =========================================================================
 * POSITION: Middle Left
 * ========================================================================= */
.plexa-toolbar--middle-left {
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

body.admin-bar .plexa-toolbar--middle-left {
    top: calc(50% + 16px);
}

/* Toggle arrow points right (toward page) */
.plexa-toolbar--middle-left .plexa-toolbar-toggle-icon {
    transform: rotate(180deg);
}

.plexa-toolbar--middle-left.is-open .plexa-toolbar-toggle-icon {
    transform: rotate(0deg);
}

/* =========================================================================
 * POSITION: Bottom Right
 * ========================================================================= */
.plexa-toolbar--bottom-right {
    right: 16px;
    bottom: 16px;
}

/* Toggle arrow points up */
.plexa-toolbar--bottom-right .plexa-toolbar-toggle-icon {
    transform: rotate(90deg);
}

.plexa-toolbar--bottom-right.is-open .plexa-toolbar-toggle-icon {
    transform: rotate(-90deg);
}

/* =========================================================================
 * POSITION: Bottom Left
 * ========================================================================= */
.plexa-toolbar--bottom-left {
    left: 16px;
    bottom: 16px;
}

/* Toggle arrow points up */
.plexa-toolbar--bottom-left .plexa-toolbar-toggle-icon {
    transform: rotate(90deg);
}

.plexa-toolbar--bottom-left.is-open .plexa-toolbar-toggle-icon {
    transform: rotate(-90deg);
}

/* =========================================================================
 * POSITION: Top Right
 * ========================================================================= */
.plexa-toolbar--top-right {
    right: 16px;
    top: 16px;
}

body.admin-bar .plexa-toolbar--top-right {
    top: 48px;
}

/* Toggle arrow points down */
.plexa-toolbar--top-right .plexa-toolbar-toggle-icon {
    transform: rotate(-90deg);
}

.plexa-toolbar--top-right.is-open .plexa-toolbar-toggle-icon {
    transform: rotate(90deg);
}

/* Reverse item order so they expand downward */
.plexa-toolbar--top-right .plexa-toolbar-items {
    flex-direction: column-reverse;
}

/* =========================================================================
 * POSITION: Top Left
 * ========================================================================= */
.plexa-toolbar--top-left {
    left: 16px;
    top: 16px;
}

body.admin-bar .plexa-toolbar--top-left {
    top: 48px;
}

/* Toggle arrow points down */
.plexa-toolbar--top-left .plexa-toolbar-toggle-icon {
    transform: rotate(-90deg);
}

.plexa-toolbar--top-left.is-open .plexa-toolbar-toggle-icon {
    transform: rotate(90deg);
}

/* Reverse item order so they expand downward */
.plexa-toolbar--top-left .plexa-toolbar-items {
    flex-direction: column-reverse;
}

/* =========================================================================
 * MOBILE POSITIONS
 * ========================================================================= */
@media screen and (max-width: 768px) {
    /* Reset desktop positions */
    .plexa-toolbar--floating {
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
    }

    /* Mobile: Bottom Right */
    .plexa-toolbar--mobile-bottom-right {
        right: 16px;
        bottom: 16px;
    }

    /* Mobile: Bottom Left */
    .plexa-toolbar--mobile-bottom-left {
        left: 16px;
        bottom: 16px;
    }

    /* Mobile: Bottom Center */
    .plexa-toolbar--mobile-bottom-center {
        left: 50%;
        bottom: 16px;
        transform: translateX(-50%);
        flex-direction: row;
    }

    .plexa-toolbar--mobile-bottom-center .plexa-toolbar-items {
        flex-direction: row;
    }

    /* Hide items marked as desktop-only */
    .plexa-toolbar--floating .plexa-toolbar-item[data-mobile="false"] {
        display: none;
    }

    /* Mobile adjustments */
    .plexa-toolbar--floating.has-labels .plexa-toolbar-btn-label {
        display: none;
    }
}

/* =========================================================================
 * REDUCED MOTION
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .plexa-toolbar--floating .plexa-toolbar-toggle-icon,
    .plexa-toolbar--floating .plexa-toolbar-items,
    .plexa-toolbar--floating .plexa-toolbar-item {
        transition: none;
    }

    .plexa-toolbar--floating.is-open .plexa-toolbar-item {
        transition-delay: 0s;
    }
}