@import 'themes/default';
@import 'themes/bandit';

.Input {
  appearance: none;
  background-color: var(--Input____bg-color);
  border: solid var(--Input____border-width) var(--Input____border-color);
  border-radius: var(--Input____radius);
  display: block;
  color: var(--Input____color);
  font-family: inherit;
  font-size: inherit;
  line-height: var(--Input____line-height);
  margin: 0;
  outline: var(--focus--style) var(--focus--width) transparent;
  outline-offset: calc(-1 * var(--focus--width));
  padding: var(--Input____padding);
  text-align: left;
  transition-property: background-color, border, color, outline, opacity;
  transition-duration: var(--Input____transition-duration);
  width: 100%;

  &::-webkit-inner-spin-button {
    opacity: 1; // visible number controls in chrome
  }

  &[type='search'] {
    appearance: textfield;
    border-radius: var(--Input--Search____radius);
    padding-left: var(--Input--Search____padding-left);
  }

  &[type='search']::-webkit-search-decoration {
    appearance: none;
  }
}

.Input:disabled,
.Input--disabled {
  opacity: 0.3;
  pointer-events: none;
}

.Input:invalid,
.Input--invalid {
  background-color: var(--Input--invalid____bg-color);
  border-color: var(--Input--invalid____border-color);
  color: var(--Input--invalid____color);
}

.Input:focus,
.Input--focused {
  background-color: var(--Input--focused____bg-color);
  border: var(--Input____border-width) solid
    var(--Input--focused____border-color);
  color: var(--Input--focused____color);
  outline: var(--focus--style) var(--focus--width)
    var(--Input--focused____outline-color);
  outline-offset: calc(-1 * var(--focus--width));
}

.Input::placeholder,
.Input--placeholder,
.Input--placeholder:focus {
  color: var(--Input--Placeholder____color);
  transition-property: color;
  transition-duration: var(--Input____transition-duration);
  -moz-font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}

.Input--mini {
  padding: var(--Input--mini____padding);

  &[type='search'] {
    padding-left: var(--Input--Search____padding-left);
  }
}

.Input--with-icon {
  // Allow space for the absolutely positioned icon, as well as a margin between the icon and input field text
  padding-left: calc(
    var(--Input--Icon____size) + var(--Input____padding) +
      var(--Input--Icon____margin)
  );

  &[type='search'] {
    padding-left: calc(
      var(--Input--Icon____size) + var(--Input--Search____padding-left) +
        var(--Input--Icon____margin)
    );
  }
}

.File-Input {
  appearance: none;
  left: -1000em;
  position: absolute;

  &:focus-visible {
    + .File-Input__Label {
      outline: var(--focus--color) var(--focus--style) var(--focus--width);
      outline-offset: var(--focus--offset);
    }
  }
}