@use 'synergy-colors';
@use 'synergy-fonts';
@use 'synergy-animations';


// :host ::ng-deep

:host ::ng-deep .p-fileupload-choose {
  font-family: map-get(synergy-fonts.$text, font-family);
  font-style: map-get(synergy-fonts.$text, font-style);
  font-weight: map-get(synergy-fonts.$text, font-weight);
  font-size: map-get(synergy-fonts.$text, font-size);
  line-height: map-get(synergy-fonts.$text, line-height);
  background-color: black;
  border-color: black;
}

:host ::ng-deep .p-fileupload-choose:not(.p-disabled):hover {
  background-color: map-get(synergy-colors.$blue, 300);
  border-color: map-get(synergy-colors.$blue, 300);
}

:host ::ng-deep .p-fileupload .p-fileupload-buttonbar {
  background: map-get(synergy-colors.$blue, 50);
  padding: 1.25rem;
  border: 1px solid #dee2e6;
  border-bottom-color: rgb(222, 226, 230);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  color: #343a40;
  border-bottom: 0 none;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}

:host ::ng-deep .p-button:enabled {
  background: black;
  border-color: black;
}

:host ::ng-deep .p-fileupload-choose:hover {
  background: black;
  border-color: black;
}

:host ::ng-deep .p-fileupload-choose:not(.p-disabled) {
  background-color: black;
  border-color: black;
}

:host ::ng-deep .p-button {
  background: map-get(synergy-colors.$blue, 500);
  border-color: map-get(synergy-colors.$blue, 500);
}

:host ::ng-deep .p-button:enabled:hover {
  background: map-get(synergy-colors.$blue, 300);
  border-color: map-get(synergy-colors.$blue, 300);
}

:host ::ng-deep .p-fileupload .p-fileupload-content {
  font-family: map-get(synergy-fonts.$text, font-family);
  font-style: map-get(synergy-fonts.$text, font-style);
  font-weight: map-get(synergy-fonts.$text, font-weight);
  font-size: map-get(synergy-fonts.$text, font-size);
  line-height: map-get(synergy-fonts.$text, line-height);
  background: #ffffff;
  padding: 2rem 1rem;
  border: 1px solid #dee2e6;
  color: #495057;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}  
