// Themes
@import './clinical-lowlight-theme/DatePicker.module';
@import './orion-fusion-theme/DatePicker.module';

:local {
  .date-picker {
    display: inline-flex;
  }

  .date-input-container {
    display: inline-flex;
  }

  .date-input {
    background-color: var(--terra-date-picker-input-background-color, #fff);
    border-bottom-right-radius: 0;
    border-color: var(--terra-date-picker-input-border-color, #dedfe0);
    border-radius: var(--terra-date-picker-input-border-radius, 3px);
    border-style: var(--terra-date-picker-input-border-style, solid);
    border-top-right-radius: 0;
    border-width: var(--terra-date-picker-input-border-width, 1px);
    box-sizing: content-box;
    color: var(--terra-date-picker-input-color, #1c1f21);
    display: inline-block;
    padding: var(--terra-date-picker-input-padding, 0.2857142858rem);
    vertical-align: middle;
    white-space: nowrap;
    width: 8em;

    &.is-focused {
      background-color: var(--terra-date-picker-input-focus-background-color, #fff);
      outline: var(--terra-date-picker-input-focus-border-outline, 2px dashed #000);
      box-shadow: var(--terra-date-picker-input-focus-box-shadow, none);
      z-index: 1;
    }

    &[disabled] {
      background-color: var(--terra-date-picker-input-disabled-background-color, rgba(111, 116, 119, 0.2));
      border: var(--terra-date-picker-input-disabled-border, 1px solid #868a8c);
      color: var(--terra-date-picker-input-disabled-color, #1c1f21);
      cursor: default;
      opacity: var(--terra-date-picker-input-disabled-opacity, 0.25);
      pointer-events: none;
    }

    &.is-invalid {
      border-color: var(--terra-date-picker-input-invalid-border-color, #e50000);
      box-shadow: var(--terra-date-picker-input-invalid-box-shadow, 0 0 0 1px #e50000);
      z-index: 1;

      &:hover {
        border-color: var(--terra-date-picker-input-invalid-hover-border-color, #e50000);
        box-shadow: var(--terra-date-picker-input-invalid-hover-box-shadow, 0 0 0 1px #e50000);
      }

      &.is-focused {
        border-color: var(--terra-date-picker-input-invalid-focus-border-color, #e50000);
        box-shadow: var(--terra-date-picker-input-invalid-focus-box-shadow, 0 0 0 1px #e50000);
      }

      &[disabled] {
        border-color: var(--terra-date-picker-input-invalid-disabled-border-color, #e50000);
        box-shadow: var(--terra-date-picker-input-invalid-disabled-box-shadow, 0 0 0 1px #e50000);
      }
    }

    &.is-incomplete {
      background-color: var(--terra-date-picker-input-incomplete-background-color, #ffc);

      &:hover {
        background-color: var(--terra-date-picker-input-incomplete-hover-background-color, #ffc);
      }

      &.is-focused {
        background-color: var(--terra-date-picker-input-incomplete-focus-background-color, #ffc);
      }

      &[disabled] {
        background-color: var(--terra-date-picker-input-incomplete-disabled-background-color, #ffc);
      }
    }

    .date-input-month,
    .date-input-day,
    .date-input-year {
      background-color: var(--terra-date-picker-input-date-component-background-color, transparent);
      border-color: var(--terra-date-picker-input-date-component-border-color, transparent);
      border-radius: var(--terra-date-picker-input-date-component-border-radius, 2px);
      border-style: var(--terra-date-picker-input-date-component-border-style, none);
      border-width: var(--terra-date-picker-input-date-component-border-width, 0);
      box-sizing: border-box;
      caret-color: var(--terra-date-picker-input-date-component-caret-color, #1c1f21);
      display: inline-block;
      height: var(--terra-date-picker-input-date-component-height, 1.4285714286rem);
      padding: var(--terra-date-picker-input-date-component-padding, 0);
      text-align: center;

      &:hover {
        background-color: var(--terra-date-picker-input-date-component-hover-background-color, transparent);
        border: var(--terra-date-picker-input-date-component-hover-border, 0 none transparent);
      }

      &:focus {
        background-color: var(--terra-date-picker-input-date-component-focus-background-color, transparent);
        border: var(--terra-date-picker-input-date-component-focus-border, 0);
        box-shadow: var(--terra-date-picker-input-date-component-focus-box-shadow, none);
        z-index: 1;
      }

      &[disabled] {
        background-color: var(--terra-date-picker-input-date-component-disabled-background-color, transparent);
        border: var(--terra-date-picker-input-date-component-disabled-border, 0);
        opacity: 1;
      }

      &::selection {
        background-color: transparent;
      }

      &.initial-focus {
        background-color: var(--terra-date-picker-input-date-component-focused-input-background-color, rgba(139, 194, 249, 0.3));
        box-shadow: none;
      }
    }

    .date-input-month {
      width: 2rem;
    }

    .date-input-day {
      width: 1.7rem;
    }

    .date-input-year {
      width: 3.1rem;
    }
  }

  .date-spacer {
    margin-left: var(--terra-date-picker-input-date-spacer-margin-left, 0.14285714rem);
    margin-right: var(--terra-date-picker-input-date-spacer-margin-right, 0.14285714rem);
  }

  .button {
    border: var(--terra-date-picker-button-border, 1px solid #dedfe0);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: var(--terra-date-picker-button-border-bottom-right-radius, 0.25em);
    border-top-left-radius: 0;
    border-top-right-radius: var(--terra-date-picker-button-border-top-right-radius, 0.25em);
    box-shadow: var(--terra-date-picker-button-box-shadow, none);
    margin-bottom: 0;
    margin-left: -0.071em;
    margin-top: 0;

    &[disabled] {
      border-color: var(--terra-date-picker-button-disabled-border-color, #dedfe0);
    }

    &:hover {
      border-color: var(--terra-date-picker-button-hover-border-color, #dedfe0);
    }

    &:focus {
      outline: var(--terra-date-picker-input-focus-border-outline, 2px dashed #000);
      box-shadow: var(--terra-date-picker-button-focus-box-shadow, none);
      z-index: 2;
    }

    &.is-invalid {
      border-color: var(--terra-date-picker-button-invalid-border-color, #e50000);
      box-shadow: var(--terra-date-picker-button-invalid-box-shadow, 0 0 0 1px #e50000);

      &:focus {
        border-color: var(--terra-date-picker-button-invalid-focus-border-color, #e50000);
        box-shadow: var(--terra-date-picker-button-invalid-focus-box-shadow, 0 0 0 1px #e50000, 0 0 4px 3px rgba(229, 0, 0, 0.35));
        z-index: 2;
      }
    }
  }

  .format-text {
    color: var(--terra-date-picker-format-text-color, rgba(0, 0, 0, 0.55));
    font-size: var(--terra-date-picker-format-text-font-size, 0.857rem);
    font-weight: var(--terra-date-picker-format-text-font-weight, normal);
    line-height: 1.25;
    margin-top: var(--terra-date-picker-format-text-margin-top, 0.357em);
    text-align: left;
  }
  // stylelint-disable property-no-vendor-prefix
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  // stylelint-disable selector-no-qualifying-type
  input[type=number] {
    -moz-appearance:textfield;
  }
}