/* ==========================================================================
   Material Design 3 Toolbar Component
   ========================================================================== */

.toolbar {
    align-items: center;
    background-color: var(--layer-container);
    box-sizing: border-box;
    color: var(--on-layer-widget);
    display: flex;
    height: 64px;
    justify-content: space-between;
    transition: all 0.2s var(--ease-standard);    
    width: 100%;
    flex-direction: row;

    &.vibrant {
        background-color: var(--primary-container);
        color: var(--on-primary-container);
    }

    &.docked {
        background-color: var(--layer-container);
        padding-inline-start: 16px;
        padding-inline-end: 16px;
        border-radius: 0;
        width: 100%;
    }


    &.floating {
        border-radius: var(--radius-full);
        padding-inline-start: 8px;
        padding-inline-end: 8px;
        
        margin: 0 16px 40px 16px;
        box-shadow: var(--elevation-3);
        background-color: var(--layer-container);

        &.vibrant {
            background-color: var(--primary-container);
        }
        &.margin-none {
            margin: 0;
        }
    }

    &.vertical {
        flex-direction: column;
        width: 64px;
        height: auto;
    }

    /* Toolbar Sections */
    .leading-section {
        display: flex;
        align-items: center;
        padding-inline-end: 16px;
    }

    .trailing-section {
        display: flex;
        align-items: center;
        gap: 4px; /* min-space-between-actions */
        padding-inline-start: 16px;
    }

    /* Toolbar Button */
    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 48px;
        min-width: 48px;
        border-radius: var(--radius-full);
        border: none;
        background-color: transparent;
        cursor: pointer;
        transition: all 0.2s var(--ease-standard);
        position: relative;
        overflow: hidden;
        padding: 0 var(--size-2);

        svg {
            height: 24px;
            width: 24px;
        }

        .label {
            margin-inline-start: var(--size-2);
            font-size: var(--font-size-body-large);
            font-weight: var(--font-weight-5);
        }

        &.selected {
            /* Selected state styling */
        }

        &:disabled {
            opacity: 0.38;
            pointer-events: none;
        }

        /* State layers for interaction */
        &:not(:disabled):hover::after,
        &:not(:disabled):focus-visible::after,
        &:not(:disabled):active::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: var(--radius-full);
            pointer-events: none;
        }

        &:not(:disabled):hover::after {
            opacity: 0.08; /* hover state layer opacity */
        }

        &:not(:disabled):focus-visible::after {
            opacity: 0.12; /* focus state layer opacity */
        }

        &:not(:disabled):active::after {
            opacity: 0.12; /* pressed state layer opacity */
        }
    }
}

/* Standard toolbar color variants */
.toolbar {
    .button {
        color: var(--on-layer-widget);
        &.filled {
            background-color: var(--primary);
            color: var(--on-primary);
        }

        &.selected {
            background-color: var(--secondary-container);
            color: var(--on-secondary-container);

            .label {
                color: var(--on-secondary-container);
            }
        }

        &:disabled {
            color: var(--on-layer-background);
        }

        &:not(:disabled):hover::after,
        &:not(:disabled):focus-visible::after,
        &:not(:disabled):active::after {
            background-color: var(--on-layer-widget);
        }

        &.selected:not(:disabled):hover::after,
        &.selected:not(:disabled):focus-visible::after,
        &.selected:not(:disabled):active::after {
            background-color: var(--on-secondary-container);
        }
    }
}

/* Vibrant toolbar color variants */
.toolbar.vibrant {
    background-color: var(--primary-container);
    color: var(--on-primary-container);
    .button {
        color: var(--on-primary-container);
        &.filled {
            background-color: var(--primary-container);
            color: var(--on-primary-container);
        }

        .label {
            color: var(--on-primary-container);
        }

        &.selected {
            background-color: var(--layer-container);
            color: var(--on-layer-background);

            .label {
                color: var(--on-layer-background);
            }
        }

        &:disabled {
            color: var(--on-layer-background);
        }

        &:not(:disabled):hover::after,
        &:not(:disabled):focus-visible::after,
        &:not(:disabled):active::after {
            background-color: var(--on-primary-container);
        }

        &.selected:not(:disabled):hover::after,
        &.selected:not(:disabled):focus-visible::after,
        &.selected:not(:disabled):active::after {
            background-color: var(--on-layer-background);
        }
    }
}

/* Toolbar with FAB container */
.toolbar-with-fab-container {
    position: relative;
    display: flex;
    align-items: center !important;
    gap: 8px; /* Space between toolbar and FAB */
    margin-bottom: 40px;
    &.vibrant .toolbar {
        background-color: var(--primary-container);
        color: var(--on-primary-container);
    }
    &.vibrant .fab {
        background-color: var(--tertiary-container);
        color: var(--on-tertiary-container);
    }
}

.toolbar-with-fab-container .toolbar {
    flex: 1;
    margin: 0;
    
}

.toolbar-with-fab-container .fab {
    z-index: var(--layer-top);
    background-color: var(--secondary-container);
    color: var(--on-secondary-container);
    position: relative;

}

/* Responsive adjustments */
@media (max-width: 599px) {
    .toolbar.floating {
        margin-inline: 8px;
    }
    
    .toolbar.docked {
        padding-inline: 8px;
    }
}

@media (min-width: 600px) {
    .toolbar .trailing-section {
        gap: 8px;
    }
}

@media (min-width: 1024px) {
    .toolbar .trailing-section {
        gap: 16px;
    }
}