.ds-form-input {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--ds-color-london-100);
  border: 0.0625rem solid var(--ds-color-london-35);
  border-radius: 0.25rem;
  box-sizing: border-box;
  color: var(--ds-color-london-5);
  display: block;
  font-family: var(--ds-type-system-sans-lining);
  font-size: var(--ds-type-scale-0);
  font-weight: 400;
  height: 2.5rem;
  line-height: var(--ds-type-leading-lower);
  margin: 0;
  max-width: 33rem;
  padding: 0.375rem var(--ds-grid-gap);
  width: 100%;
  ::placeholder {
    color: var(--ds-color-london-35);
  }
  &:focus {
    border-color: var(--ds-color-london-5);
    box-shadow: 0 0 0 0.125rem var(--ds-color-hong-kong-55);
    outline: solid transparent;
  }
  &:disabled {
    background-color: var(--ds-color-london-95);
    border: none;
    color: hsla(var(--ds-color-hsl-london-5), 0.5);
    cursor: not-allowed;
  }
}

.ds-form-input--inverse {
  border: 0.0625rem solid var(--ds-color-london-95);
}

.ds-form-input--invalid {
  border-color: var(--ds-color-tokyo-55);
  box-shadow: 0 0 0 0.0625rem var(--ds-color-tokyo-55);
}

.ds-number-input {
  -moz-appearance: textfield;
  padding-right: var(--ds-grid-gutter);
  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    display: none;
  }
}

.ds-date-input {
  background-image: url('eds://common/static/images/icons/material-date-range.svg');
  background-position-x: calc(100% - var(--ds-grid-gap));
  background-position-y: 0.5rem;
  background-repeat: no-repeat;
  background-size: 1.5rem 1.5rem;
  &::-webkit-calendar-picker-indicator {
    opacity: 0;
  }
  &::-webkit-inner-spin-button,
  &::-webkit-clear-button {
    display: none;
  }
  &:disabled {
    background-image: url('eds://common/static/images/icons/material-date-range--disabled.svg');
  }
}

.ds-text-area {
  height: auto;
  min-height: 7rem;
  padding: 0.75rem var(--ds-grid-gap);
}

.ds-form-field-select {
  background:
    linear-gradient(var(--ds-color-london-100), var(--ds-color-london-100)) no-repeat right 3.75rem center,
    linear-gradient(-135deg, transparent 50%, var(--ds-color-london-100) 50%) no-repeat right 0.75rem bottom 0.25rem,
    linear-gradient(-225deg, transparent 50%, var(--ds-color-london-100) 50%) no-repeat right 0.75rem bottom 0.25rem,
    linear-gradient(var(--ds-color-london-100) 55%, var(--ds-color-london-5) 55%) no-repeat right 0.75rem bottom 0.25rem;
  background-size: 0.0625rem 100%, 1.25rem 1.375rem, 1.25rem 1.375rem, 1.25rem 100%;
  &:hover {
    background-image:
      linear-gradient(var(--ds-color-london-100), var(--ds-color-london-100)),
      linear-gradient(-135deg, transparent 50%, var(--ds-color-london-100) 50%),
      linear-gradient(-225deg, transparent 50%, var(--ds-color-london-100) 50%),
      linear-gradient(var(--ds-color-london-100) 55%, var(--ds-color-london-5) 55%);
  }
  &:active {
    background-image:
      linear-gradient(var(--ds-color-london-100), var(--ds-color-london-100)),
      linear-gradient(-135deg, transparent 50%, var(--ds-color-london-100) 50%),
      linear-gradient(-225deg, transparent 50%, var(--ds-color-london-100) 50%),
      linear-gradient(var(--ds-color-london-100) 55%, var(--ds-color-london-5) 55%);
  }
  &:focus {
    background-image:
      linear-gradient(var(--ds-color-london-100), var(--ds-color-london-100)),
      linear-gradient(-135deg, transparent 50%, var(--ds-color-london-100) 50%),
      linear-gradient(-225deg, transparent 50%, var(--ds-color-london-100) 50%),
      linear-gradient(var(--ds-color-london-100) 55%, var(--ds-color-london-5) 55%);
  }
  &:disabled {
    background-image:
      linear-gradient(var(--ds-color-london-95), var(--ds-color-london-95)),
      linear-gradient(-135deg, transparent 50%, var(--ds-color-london-95) 50%),
      linear-gradient(-225deg, transparent 50%, var(--ds-color-london-95) 50%),
      linear-gradient(var(--ds-color-london-95) 55%, var(--ds-color-london-70) 55%);
  }
}

.ds-form-input--slim {
  height: 2.25rem;
  &.ds-date-input {
    background-position-y: 0.3rem;
  }
  &.ds-form-field-select {
    background-size: 0.0625rem 100%, 1.725rem 1.375rem, 1.25rem 1.375rem, 1.25rem 100%;
  }
}

.ds-form-label + .ds-form-input,
.ds-form-helper-text + .ds-form-input,
.ds-form-label + .ds-form-field-combined-input {
  margin: 0.375rem 0 0 0;
}

.ds-form-input + .ds-form-input {
  margin: 1rem 0 0 0;
}