AlexAegis/loreplotter

@import '~@angular/material/theming';

@mixin timeline-component-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $warn: map-get($theme, warn);

    app-timeline {
        .channelsContainer,
        .ruler {
            background-color: rgba(mat-color($primary), 0.3);
        }

        .ruler .divisorContainer .divisor {
            background-color: rgba(mat-color($primary, 'darker'), 0.77);

            .subDivisor {
                background-color: rgba(mat-color($primary, 'darker'), 0.14);
            }
        }

        .channel {
            color: rgba(mat-color($primary, 'darker'), 0.2);
        }

        .hovered {
            color: rgba(mat-color($accent), 0.9);
        }
    }
}