// IMPORTS
@use 'synergy-colors';
@use 'synergy-fonts';
@use 'synergy-animations';


// :host ::ng-deep 

:host ::ng-deep .p-slider .p-slider-range {
  background: map-get(synergy-colors.$blue, 300);
}

:host ::ng-deep .p-slider:not(.p-disabled) .p-slider-handle {
//   background: map-get(synergy-colors.$blue, 50);
//   border-color: map-get(synergy-colors.$blue, 300);
  background-color: map-get(synergy-colors.$blue, 50);
    border-color: map-get(synergy-colors.$blue, 300);
}

:host ::ng-deep .p-slider {
  background: map-get(synergy-colors.$blue, 50);
}

:host ::ng-deep .p-slider .p-slider-handle:focus {
  box-shadow: 0 0 0 0.2rem map-get(synergy-colors.$blue, 100);
}