.full {
  width: 100%;
}

.input {
  -webkit-font-smoothing: antialiased;
  background-color: var(--input-bg);
  border: 2px solid transparent;
  border-radius: $input-corner;
  box-sizing: border-box;
  display: block;
  width: 100%;

  &:not(.wrapper) {
    padding: $unit * 1.5 $unit-2x;
  }

  &.accessory {
    $offset: 2px;

    align-items: center;
    background: var(--input-bg);
    border-radius: $input-corner;
    border: $offset solid transparent;
    box-sizing: border-box;
    position: relative;

    .counter {
      color: var(--text-tertiary);
      display: block;
      font-weight: $bold;
      line-height: 48px;
      position: absolute;
      right: $unit-2x;
      top: 0;
    }

    input {
      background: transparent;
      border-radius: $input-corner;
      border: none;
      box-sizing: border-box;
      padding: ($unit * 1.75) $unit-2x;
      width: 100%;
    }
  }

  &[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  &:focus {
    border: 2px solid $blue;
    outline: none;
  }

  &.bound {
    background-color: var(--input-bound-bg);

    &:hover {
      background-color: var(--input-bound-bg-hover);
    }
  }

  &.number {
    min-width: $unit-8x;
  }

  &.AlignRight {
    text-align: right;
  }

  &.Hidden {
    display: none;
  }
}

.counter {
  display: none;
}

.input::placeholder,
.input > input::placeholder {
  color: var(--text-secondary);
  opacity: 1;
}