/** Datei: themes/default/assets/scss/components/_breadcrumbs.scss **/
.breadcrumbs {
	display: flex;
	gap: 0.5rem;
	
	&__{
		&item {
			color: getThemeColor( secondary );
			cursor: pointer;
			
			&:hover {
				color: getThemeColor( primary );
			}
			
			&--active {
				font-weight: bold;
				cursor: default;
				color: getThemeColor( primary );
			}
			
			&--inactive {
				cursor: default;
				color: getThemeColor( primary );
			}
		}
		
		&separator {
			&:before {
				content: '/';
				display: block;
			}
		}
	}
}

/** Datei: themes/default/assets/scss/components/_button.scss **/
/**
 * _button.scss
 *
 * Stile für die Button-Komponente unter Berücksichtigung von BEM.
 *
 * @author         Sparky
 * @copyright      2025 ARUNOX
 * @version        1.0.2
 * @since          1.0.0  File is created
 * @since          1.0.1  Farben mit Bootstrap-Variablen korrigiert
 * @since          1.0.2  Dynamische Farben aus _buttons.scss übernommen
 */

@import "../variables"; // Stellt sicher, dass Theme-Variablen geladen werden

@mixin buttonColors() {
    background-color: var( --color-background );
    color: var( --color-text );

    &:hover {
        background-color: var( --color-background-hover );
        color: var( --color-text-hover );
    }

    &:active {
        background-color: var( --color-background-acive );
        color: var( --color-text-acive );
    }
}

button {
    border: 0;
    background: transparent;
    outline: 0;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2em 0.6em;
    font-size: 1rem;
    border-radius: $border-radius;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    font-weight: bold;
    gap: $gap-small;
    min-height: 2rem;
    outline: 0;
    
    @include buttonColors();

    & {
        &-- {
            &wrapper {
                position: relative;
                display: inline-block;
            }
        }
        
        &__ {
            &dropdown {
                position: absolute;
                top: 100%;
                right: 0;
                display: none;
                z-index: 10;
                gap: $gap-small;
    
                padding: 5px;
                border: 1px solid #{getCoreColor( gray )};
                
                background: #fff;
                border-radius: $border-radius;
            
                &.open {
                    display: flex;
                    flex-direction: column;
                }
            
                &__item {
                    display: block;
                    width: 100%;
                
                    .button {
                        width: 100%;
                        background: none;
                        color: #{getThemeColor( text )} !important;
                        min-height: auto;
                        padding: 0.4em 0.8em;
                        font-size: 0.9rem;
                        justify-content: start;
                        white-space: nowrap;
                        
                        &:hover {
                            background: rgba(0, 0, 0, 0.05);
                        }
                    }
                }
            }
            
            icon {
//                margin-right: 0.5rem;
//                font-size: 1.2rem;
            }
        }
    }
}