/*!
Copyright 2023 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/

.spectrum{
  --system-spectrum-datepicker-initial-height:var(--spectrum-component-height-100);
}

.spectrum--express{
  --system-spectrum-datepicker-initial-height:var(--spectrum-component-height-75);
}

.spectrum-DatePicker{
  --spectrum-datepicker-border-radius:var(--spectrum-corner-radius-100);
  --spectrum-datepicker-border-radius-quiet:0;
  --spectrum-datepicker-border-width:var(--spectrum-border-width-100);
  --spectrum-datepicker-min-width:var(--spectrum-field-width);
  --spectrum-datepicker-icon-size:var(--spectrum-workflow-icon-size-100);
  --spectrum-datepicker-pickerbutton-border-color:var(--spectrum-gray-500);
  --spectrum-datepicker-pickerbutton-border-color-invalid:var(--spectrum-negative-border-color-default);
  --spectrum-datepicker-pickerbutton-width:calc((var(--spectrum-field-edge-to-disclosure-icon-100) * 2) + var(--spectrum-workflow-icon-size-100));
  --spectrum-datepicker-pickerbutton-width-quiet:calc(var(--spectrum-datepicker-pickerbutton-width) - var(--spectrum-datepicker-quiet-button-offset));
  --spectrum-datepicker-quiet-button-offset:var(--spectrum-text-to-visual-100);
  --spectrum-datepicker-icon-to-button:var(--spectrum-text-to-visual-100);
  --spectrum-datepicker-icon-to-text:var(--spectrum-component-edge-to-text-100);
  --spectrum-datepicker-focus-ring-gap:var(--spectrum-focus-indicator-gap);
  --spectrum-datepicker-focus-thickness:var(--spectrum-focus-indicator-thickness);
  --spectrum-datepicker-focus-animation:var(--spectrum-animation-duration-100);
  --spectrum-datepicker-focus-ring-width:var(--spectrum-border-width-100);
  --spectrum-datepicker-focus-ring-color:var(--spectrum-focus-indicator-color);
  --spectrum-datepicker-focus-line-gap:var(--spectrum-spacing-75);
  --spectrum-datepicker-invalid-quiet-color:var(--spectrum-negative-border-color-default);
  --spectrum-datepicker-quiet-border-color-hover:var(--spectrum-gray-500);
  --spectrum-datepicker-border-color-disabled:var(--spectrum-disabled-border-color);
  --spectrum-datepicker-dash-font-size:var(--spectrum-font-size-100);
  --spectrum-datepicker-dash-color-disabled:var(--spectrum-disabled-content-color);
  --spectrum-datepicker-range-dash-marin-inline-start:calc( -0.5 * var(--spectrum-datepicker-dash-font-size));
  --spectrum-datepicker-range-dash-padding-top:0;
  --spectrum-datepicker-input-width-base:calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-datepicker-icon-size));
  --spectrum-datepicker-input-width:calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height));
  --spectrum-datepicker-input-width-quiet:calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));

  --spectrum-datepicker-range-input-width-first:calc(var(--spectrum-datepicker-initial-width) - 2 * var(--spectrum-datepicker-generic-padding));
  --spectrum-datepicker-range-input-width-quiet-first:calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second));

  --spectrum-datepicker-datetime-input-width-first:calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first));
  --spectrum-datepicker-datetime-input-width:calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
  --spectrum-datepicker-datetime-quiet-input-width-first:calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width));
  --spectrum-datepicker-datetime-quiet-input-width:calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
  --spectrum-datepicker-padding-inline-end:calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - (var(--spectrum-datepicker-border-width) * 2));
  --spectrum-datepicker-padding-inline-end-quiet:calc((var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100)) - var(--spectrum-datepicker-quiet-button-offset));
  --spectrum-datepicker-padding-inline-end-invalid:calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--spectrum-datepicker-icon-to-button) + var(--spectrum-datepicker-icon-size) - (var(--spectrum-datepicker-border-width) * 2));
  --spectrum-datepicker-padding-inline-end-invalid-quiet:calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text));
}

.spectrum-DatePicker{
  position:relative;
  display:inline-flex;
  flex-direction:row;
  flex-wrap:nowrap;
  min-inline-size:var(--mod-datepicker-min-width, var(--spectrum-datepicker-min-width));
  border-radius:var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius));
}

.spectrum-DatePicker.is-disabled .spectrum-DatePicker-rangeDash{
      color:var(--highcontrast-datepicker-dash-color-disabled, var(--mod-datepicker-dash-color-disabled, var(--spectrum-datepicker-dash-color-disabled)))
    }

.spectrum-DatePicker.is-invalid{
    --mod-textfield-icon-spacing-inline-end-invalid:calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-datepicker-invalid-icon-to-button));
    --mod-textfield-icon-spacing-inline-end-quiet-invalid:calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-invalid-icon-to-button-quiet));
  }

.spectrum-DatePicker:not(.spectrum-DatePicker--quiet):not(.is-disabled){
  --mod-picker-button-border-color:var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color, var(--spectrum-datepicker-pickerbutton-border-color)));
}

.spectrum-DatePicker.is-invalid:not(.spectrum-DatePicker--quiet):not(.is-disabled){
    --mod-picker-button-border-color:var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-datepicker-pickerbutton-border-color-invalid)));
  }

.spectrum-DatePicker-input{
  padding-inline-end:var(--mod-datepicker-padding-inline, var(--spectrum-datepicker-padding-inline-end));
}

.spectrum-DatePicker-input.spectrum-DatePicker-endField{
    padding-inline-end:var(--mod-datepicker-padding-inline, var(--spectrum-datepicker-padding-inline-end));
  }

.is-invalid .spectrum-DatePicker-input{
    padding-inline-end:var(--mod-datepicker-padding-inline-end-invalid, var(--spectrum-datepicker-padding-inline-end-invalid));
}

.spectrum-DatePicker--quiet .spectrum-DatePicker-input{
    padding-inline-end:var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet));
  }

.spectrum-DatePicker--quiet .is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField){
    padding-inline-end:var(--mod-datepicker-padding-inline-end-invalid-quiet, var(--spectrum-datepicker-padding-inline-end-invalid-quiet));
  }

.spectrum-DatePicker--quiet .spectrum-DatePicker-input.spectrum-DatePicker-endField{
    padding-inline-end:var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet));
  }

.spectrum-DatePicker-button{
  position:absolute;
  inset-inline-end:0;
}

.spectrum-DatePicker--quiet{
  border-radius:var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet));
}

.spectrum-DatePicker--quiet .spectrum-DatePicker-button{
    inline-size:auto;
    inset-inline-end:calc(-1 * var(--mod-datepicker-quiet-button-offset, var(--spectrum-datepicker-quiet-button-offset)));
  }

.spectrum-DatePicker--quiet .spectrum-DatePicker-button:disabled,
.spectrum-DatePicker--quiet .spectrum-DatePicker-button.is-disabled{
      border-color:var(--mod-datepicker-border-color-disabled, var(--spectrum-datepicker-border-color-disabled));
    }

.spectrum-DatePicker--quiet .spectrum-DatePicker-button:disabled:not(.is-open) .spectrum-PickerButton-fill,
.spectrum-DatePicker--quiet .spectrum-DatePicker-button.is-disabled:not(.is-open) .spectrum-PickerButton-fill{
        border-color:transparent;
      }

.spectrum-DatePicker--quiet .spectrum-DatePicker-button:not(:disabled):not(.is-open) .spectrum-PickerButton-fill{
        background-color:transparent;
      }

@media (hover: hover){

.spectrum-DatePicker--quiet .spectrum-DatePicker-button:disabled:hover,
.spectrum-DatePicker--quiet .spectrum-DatePicker-button:disabled.is-hover,
.spectrum-DatePicker--quiet .spectrum-DatePicker-button.is-disabled:hover,
.spectrum-DatePicker--quiet .spectrum-DatePicker-button.is-disabled.is-hover{
      border-color:var(--mod-datepicker-border-color-disabled, var(--spectrum-datepicker-border-color-disabled));
    }

.spectrum-DatePicker--quiet:hover:not(.is-focused):not(.is-keyboardFocused):not(.is-disabled):not(.is-invalid) .spectrum-DatePicker-input, .spectrum-DatePicker--quiet:hover:not(.is-focused):not(.is-keyboardFocused):not(.is-disabled):not(.is-invalid) .spectrum-DatePicker-button,
.spectrum-DatePicker--quiet.is-hover:not(.is-focused):not(.is-keyboardFocused):not(.is-disabled):not(.is-invalid) .spectrum-DatePicker-input,
.spectrum-DatePicker--quiet.is-hover:not(.is-focused):not(.is-keyboardFocused):not(.is-disabled):not(.is-invalid) .spectrum-DatePicker-button,
.spectrum-DatePicker--quiet.is-hover:not(.is-focused):not(.is-keyboardFocused):not(.is-disabled):not(.is-invalid) .spectrum-DatePicker-input,
.spectrum-DatePicker--quiet.is-hover:not(.is-focused):not(.is-keyboardFocused):not(.is-disabled):not(.is-invalid) .spectrum-DatePicker-button{
      border-color:var(--mod-datepicker-quiet-border-color-hover, var(--spectrum-datepicker-quiet-border-color-hover));
    }
}

.spectrum-DatePicker--quiet.is-invalid .spectrum-DatePicker-input, .spectrum-DatePicker--quiet.is-invalid .spectrum-DatePicker-button{
      border-color:var(--highcontrast-datepicker-invalid-quiet-color, var(--mod-datepicker-invalid-quiet-color, var(--spectrum-datepicker-invalid-quiet-color)));
    }

.spectrum-DatePicker--range{
  border-radius:var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius));
}

.spectrum-DatePicker--range::after{
    pointer-events:none;
    content:'';
    position:absolute;
    inset:0;
    margin:calc(var(--mod-datepicker-focus-ring-gap, var(--spectrum-datepicker-focus-ring-gap)) * -1);
    border-radius:calc(var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius)) + var(--mod-datepicker-focus-ring-gap, var(--spectrum-datepicker-focus-ring-gap)));
    border-color:transparent;
    transition:box-shadow var(--mod-datepicker-focus-animation, var(--spectrum-datepicker-focus-animation)) ease-in-out, border-color var(--mod-datepicker-focus-animation, var(--spectrum-datepicker-focus-animation)) ease-in-out;
  }

.spectrum-DatePicker--range.is-keyboardFocused:not(.spectrum-DatePicker--quiet)::after{
      box-shadow:0 0 0 var(--mod-datepicker-focus-ring-width, var(--spectrum-datepicker-focus-ring-width)) var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-datepicker-focus-ring-color)));
    }

.spectrum-DatePicker--range.is-keyboardFocused:not(.spectrum-DatePicker--quiet) .spectrum-DatePicker-textfield::after{
      display:none;
    }

.spectrum-DatePicker--range.is-keyboardFocused.spectrum-DatePicker--quiet::after{
      margin:0;
      box-shadow:none;
      border-radius:0;
      border-block-end:var(--mod-datepicker-focus-thickness, var(--spectrum-datepicker-focus-thickness)) solid var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-datepicker-focus-ring-color)));
      inset-block-end:calc(-1 * var(--mod-datepicker-focus-line-gap, var(--spectrum-datepicker-focus-line-gap)));
    }

.spectrum-DatePicker--range.spectrum-DatePicker--quiet{
    border-radius:var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet));
  }

.spectrum-DatePicker--range.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield{
      min-inline-size:0;
      inline-size:var(--mod-datepicker-input-width-quiet, var(--spectrum-datepicker-input-width-quiet));
    }

.spectrum-DatePicker--range.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield:first-of-type{
        inline-size:var(--mod-datepicker-range-input-width-quiet-first, var(--spectrum-datepicker-range-input-width-quiet-first));
      }

.spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange .spectrum-DatePicker-textfield{
      inline-size:var(--mod-datepicker-datetime-input-width, var(--spectrum-datepicker-datetime-input-width));
      min-inline-size:0;
    }

.spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange .spectrum-DatePicker-textfield:first-of-type{
        inline-size:var(--mod-datepicker-datetime-input-width-first, var(--spectrum-datepicker-datetime-input-width-first));
      }

.spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield{
        inline-size:var(--mod-datepicker-datetime-quiet-input-width, var(--spectrum-datepicker-datetime-quiet-input-width));
      }

.spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield:first-of-type{
          inline-size:var(--mod-datepicker-datetime-quiet-input-width-first, var(--spectrum-datepicker-datetime-quiet-input-width-first));
        }

.spectrum-DatePicker--range .spectrum-DatePicker-textfield{
    flex:initial;
    min-inline-size:0;
    inline-size:var(--mod-datepicker-input-width, var(--spectrum-datepicker-input-width));
  }

.spectrum-DatePicker--range .spectrum-DatePicker-textfield:first-of-type{
      inline-size:var(--mod-datepicker-range-input-width-first, var(--spectrum-datepicker-range-input-width-first));
    }

.spectrum-DatePicker-input{
    flex:1;
    inline-size:100%;
  }

.spectrum-DatePicker-input.spectrum-DatePicker-startField{
      border-inline-end:0;
      border-start-end-radius:0;
      border-end-end-radius:0;
      padding-inline-end:var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding));
    }

.spectrum-DatePicker-input.spectrum-DatePicker-endField{
      border-inline-start:0;
      border-start-start-radius:0;
      border-end-start-radius:0;
      padding-inline-start:var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding));
    }

.spectrum-DatePicker-rangeDash{
    line-height:var(--mod-datepicker-dash-line-height, var(--spectrum-datepicker-dash-line-height));
    padding-block-start:var(--mod-datepicker-range-dash-padding-top, var(--spectrum-datepicker-range-dash-padding-top));
    flex:initial;
    inline-size:0;
    z-index:1;
  }

.spectrum-DatePicker-rangeDash::before{
      content:"–";
      display:inline-block;
      margin-block:0;
      margin-inline:var(--mod-datepicker-range-dash-margin-left, var(--spectrum-datepicker-range-dash-marin-inline-start));
      overflow:hidden;
      text-align:center;
      vertical-align:middle;
      inline-size:var(--mod-datepicker-dash-font-size, var(--spectrum-datepicker-dash-font-size));
    }

@media (forced-colors: active){
	.spectrum-DatePicker{
    --highcontrast-datepicker-dash-color-disabled:GrayText;
    --highcontrast-datepicker-focus-ring-color:Highlight;
    --highcontrast-datepicker-pickerbutton-border-color:Highlight;
    --highcontrast-datepicker-invalid-quiet-color:Highlight;
  	}
}

.spectrum-DatePicker{
  --spectrum-datepicker-initial-height:var(--system-spectrum-datepicker-initial-height);
}
