@import url('./design-tokens.css');

/* dat.GUI spezifische Stile */
.dg.main {
    background: rgba(var(--color-primary-rgb), 0.1); /* Hellerer Hintergrund für bessere Sichtbarkeit */
    border: none !important;
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.4);
    text-shadow: 0 0 5px rgba(var(--color-primary-rgb), 0.8);
    color: var(--color-primary-light);
    width: 100%; /* Stelle sicher, dass die Breite an den Container angepasst ist */
    max-width: 100%; /* Verhindert Überhang */
}

.dg.main .close-button {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.2), rgba(var(--color-secondary-rgb), 0.2));
    border: 1px solid rgba(var(--color-primary-rgb), 0.5);
    color: var(--color-primary-light);
    text-shadow: 0 0 5px rgba(var(--color-primary-rgb), 0.8);
    transition: all var(--transition-normal) ease;
}

.dg.main .close-button:hover {
    box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.8);
}

.dg .title {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.25), rgba(var(--color-secondary-rgb), 0.25));
    color: var(--color-primary-light);
    text-shadow: 0 0 5px rgba(var(--color-primary-rgb), 0.8);
    border-bottom: 1px solid rgba(var(--color-primary-light-rgb), 0.6);
    position: relative;
    overflow: hidden;
}

.dg .title::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(transparent, rgba(255, 255, 255, 0.15), transparent);
    transform: rotate(45deg);
    animation: shimmer 15s infinite linear;
}

.dg .c input[type="text"],
.dg .c input[type="number"] {
    background: rgba(var(--color-primary-rgb), 0.1); /* Hellerer Hintergrund für Eingabefelder */
    border: 1px solid rgba(var(--color-primary-rgb), 0.5);
    color: var(--color-primary-light);
    text-shadow: 0 0 5px rgba(var(--color-primary-rgb), 0.5);
    box-shadow: inset 0 0 5px rgba(var(--color-primary-rgb), 0.3);
    border-radius: var(--radius-xs);
}

.dg .c input[type="text"]:focus,
.dg .c input[type="number"]:focus {
    box-shadow: inset 0 0 10px rgba(var(--color-primary-rgb), 0.5), 0 0 10px rgba(var(--color-primary-rgb), 0.8);
}

.dg .cr {
    background: rgba(var(--color-primary-rgb), 0.1); /* Hellerer Hintergrund für Controller */
    border: none;
}

.dg .slider {
    background: rgba(var(--color-primary-rgb), 0.1); /* Hellerer Hintergrund für Slider */
    border: 1px solid rgba(var(--color-primary-rgb), 0.5);
    border-radius: var(--radius-xs);
}

.dg .slider-fg {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.5), rgba(var(--color-secondary-rgb), 0.5));
    box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.8);
}

.dg .controller {
    color: var(--color-primary-light);
    text-shadow: 0 0 5px rgba(var(--color-primary-rgb), 0.8);
}

.dg .controller:hover {
    background: rgba(var(--color-primary-rgb), 0.15); /* Etwas heller für Hover-Effekt */
}