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



//INPUT/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

.input-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.icon{
    right: 0;
    position: absolute;
    margin-right: 30px;
    margin-top: -7px;
    z-index: 2;
    color: map-get(synergy-colors.$blue, 300);
}

.icon-disabled {
    color: map-get(synergy-colors.$grey, 300);
}

.icon-error{
    color: map-get(synergy-colors.$error, 300);
}

:host ::ng-deep .p-calendar {
    width: 100%;
    height: 50%;
}

:host ::ng-deep .p-calendar input{
    width: 100%;
    height: 100%;
    background-color: white;
    border: 1px solid black;
    border-radius: 4px;
    align-items: flex-start;
    padding: 8px 16px;
    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);
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 7px;
    margin-bottom: 7px;
    box-shadow: none !important;
    box-sizing: border-box !important;
    margin-top : 0;
}

:host ::ng-deep .p-calendar input:focus{
    border: 3px solid map-get(synergy-colors.$blue, 300);
}

:host ::ng-deep .p-button-label{
    font-family: map-get(synergy-fonts.$smallSubTitle-highlighted, font-family);
    font-style: map-get(synergy-fonts.$smallSubTitle-highlighted, font-style);
    font-weight: map-get(synergy-fonts.$smallSubTitle-highlighted, font-weight);
    font-size: map-get(synergy-fonts.$smallSubTitle-highlighted, font-size);
    line-height: map-get(synergy-fonts.$smallSubTitle-highlighted, line-height);
    color: white;
}

:host ::ng-deep .p-button {
    background-color: black;
    border-radius: 20px;
    box-sizing: border-box;
}

:host ::ng-deep .p-button.p-button-text:enabled:hover {
    background-color: map-get(synergy-colors.$blue, 300);
}

:host ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled {
    color: black;
}

:host ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover:hover {
    color: map-get(synergy-colors.$blue, 300);
}

:host ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled {
    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);
    color: black;
}

:host ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
    color: map-get(synergy-colors.$blue, 300);
}

:host ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover:hover {
    color: white;
    border-color: transparent;
    background: black;
}

:host ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
    color: white;
    border-color: transparent;
    background: black;
}

:host ::ng-deep .p-datepicker table td > span.p-highlight {
    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);
    color: map-get(synergy-colors.$blue, 300);
    background: map-get(synergy-colors.$blue, 50);
}
:host ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled){
    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);
    color: black;
}
:host ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
    background: map-get(synergy-colors.$blue, 50);
}

:host ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight){
    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);
    color: black;
}

:host ::ng-deep .p-datepicker .p-timepicker button:enabled{
    color: black;
}

:host ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
    background: map-get(synergy-colors.$blue, 50);
}

:host ::ng-deep .p-component{
    box-sizing: border-box;
    color: black;
}

:host ::ng-deep .p-datepicker-title .ng-tns-c50-0{
    color: black;
}


:host ::ng-deep .p-datepicker .p-timepicker button:enabled:hover {
    color: black;
    border-color: transparent;
    background: map-get(synergy-colors.$blue, 50);
}

:host ::ng-deep datepicker-title .p-datepicker-year:enabled {
    color: black;
}

:host ::ng-deep .p-datepicker-year .p-link .ng-tns-c50-0 .ng-star-inserted {
    color: black;
}

:host ::ng-deep .p-datepicker-prev-icon .pi .pi-chevron-left .ng-tns-c50-0{
    color: black;
}

:host ::ng-deep .p-datepicker-prev-icon .pi .pi-chevron-right .ng-tns-c50-0{
    color: black;
}

:host ::ng-deep  .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled {
    color: black;
}

:host ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:enabled {
    color: black;
}

:host ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
    background: map-get(synergy-colors.$blue, 50);
}

:host ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:focus:focus {
    outline: 0 none;
    outline-offset: 0;
    box-shadow: map-get(synergy-colors.$shadow, button);
}

:host ::ng-deep  .p-datepicker .p-datepicker-header .p-datepicker-next:focus{
    outline: 0 none;
    outline-offset: 0;
    box-shadow: map-get(synergy-colors.$shadow, button);
}

:host ::ng-deep .p-button.p-button-text:enabled:focus {
    box-shadow: map-get(synergy-colors.$shadow, button);
}

:host ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
    outline: 0 none;
    outline-offset: 0;
    box-shadow: map-get(synergy-colors.$shadow, button);
}

:host ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
    color: black;
    background: map-get(synergy-colors.$blue, 50);
}

:host ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
    color: black;
    background: map-get(synergy-colors.$blue, 50);
}

:host ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
    outline: 0 none;
    outline-offset: 0;
    box-shadow: map-get(synergy-colors.$shadow, button);
}

:host ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
    outline: 0 none;
    outline-offset: 0;
    background: map-get(synergy-colors.$blue, 50);
}

:host ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
    outline: 0 none;
    outline-offset: 0;
    box-shadow: map-get(synergy-colors.$shadow, button);
}

:host ::ng-deep .p-datepicker table td.p-datepicker-today > span {
    background: map-get(synergy-colors.$blue, 300);
    color: white !important;
    border-color: transparent;
}

:host ::ng-deep .p-datepicker table td.p-datepicker-today > span:hover {
    background: map-get(synergy-colors.$blue, 50);
}

:host ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
    background: map-get(synergy-colors.$blue, 50) !important;
    color: black !important;
}

:host ::ng-deep .p-datepicker table td > span:focus {
    outline: 0 none;
    outline-offset: 0;
    box-shadow: map-get(synergy-colors.$shadow, button);
    color: black;
}
// p-ripple p-element ng-tns-c50-0 ng-star-inserted
// LABEL/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

.label{
    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);
}

.disabled-label{
    color: map-get(synergy-colors.$grey, 300);
}

.label-error{
    color: map-get(synergy-colors.$error, 300);
}

.disabled-label{
    color: map-get(synergy-colors.$grey, 300);
}