@import '../../marketplace.css';

.inputRoot {
  /* Override react-dates default styles to match input styles */

  & :global(.SingleDatePicker) {
    display: block;
  }
  & :global(.SingleDatePickerInput) {
    border: none;
  }
  & :global(.DateInput) {
    display: block;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  & :global(.DateInput__display-text) {
    @apply --marketplaceDefaultFontStyles;
    padding: 0;
    color: var(--matterColorAnti);
  }
  & :global(.DateInput__display-text--focused) {
    background-color: transparent;
  }
  & :global(.DateInput__display-text--has-input) {
    color: var(--matterColor);
  }
}

.fieldRoot {
}

.input {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: var(--attentionColor);

  transition: border-bottom-color var(--transitionStyle);

  &:hover,
  &:focus {
    border-bottom-color: var(--matterColor);
    outline: none;
  }
}

.inputSuccess {
  border-bottom-color: var(--successColor);
}

.inputError {
  border-bottom-color: var(--failColor);
}
