@use 'sass:math';
@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;

.a-text-input {
  // Theme variables.
  --input-text: var(--input-text-default);
  --input-text-disabled: var(--input-text-disabled-default);
  --input-text-placeholder: var(--input-text-placeholder-default);
  --input-border: var(--input-border-default);
  --input-border-hover: var(--input-border-hover-default);
  --input-border-focus: var(--input-border-focus-default);
  --input-bg: var(--input-bg-default);
  --input-bg-disabled: var(--input-bg-disabled-default);

  // Reset the browser's default styling.
  appearance: none;
  display: inline-block;
  padding: math.div(7px, $base-font-size-px) + em;
  border: 1px solid var(--input-border);
  outline: 0 solid var(--input-border);
  background: var(--input-bg);
  color: var(--input-text);
  box-sizing: border-box;

  &:hover,
  &.hover {
    border-color: var(--input-border-hover);
    outline: 1px solid var(--input-border-hover);
  }

  &:focus,
  &.focus {
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 1px var(--input-border-focus);
    outline: 1px dotted var(--input-border-focus);
    outline-offset: 2px;
  }

  &:disabled {
    --input-border: var(--input-border-disabled);
    &,
    &:hover,
    &.hover,
    &:focus,
    &.focus {
      color: var(--input-text-disabled);
      background-color: var(--input-bg-disabled);
      cursor: not-allowed;

      // Cancel the hover and focus states.
      border-color: var(--input-border);
      outline: none;
    }
  }

  &--error,
  &--warning,
  &--success {
    outline-width: 1px;
  }

  &--error {
    --input-border: var(--input-border-error);
  }

  &--warning {
    --input-border: var(--input-border-warning);
  }

  &--success {
    --input-border: var(--input-border-success);
  }
}

// Overrides extra left padding.
// http://stackoverflow.com/questions/11127891/how-can-i-get-rid-of-horizontal-padding-or-indent-in-html5-search-inputs-in-webk
::-webkit-search-decoration {
  appearance: none;
}

// Change place holder text to dark gray (#43484e).
::placeholder {
  color: var(--input-text-placeholder);
}

// Force placeholder text color change for "date" field type.
input[type='date']::-webkit-datetime-edit {
  color: var(--input-text-placeholder);
}