input.span-template-input,
select.span-template-input {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 var(--spacing-xs);
  padding: 0 var(--spacing-md);
  border: 1px solid var(--color-border-info_subtle);
  border-radius: var(--border-radius-xs);
  background-color: var(--color-bg-info-primary);
  color: var(--color-text-info-primary);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: var(--weight-regular);
  line-height: var(--line-height-text-sm);
  letter-spacing: 0;
  vertical-align: middle;

  &:focus {
    outline: 2px solid var(--color-border-info);
    outline-offset: 1px;
  }

  &::placeholder {
    color: var(--color-text-info-primary);
    opacity: 1;
  }

  &.info,
  &.info:disabled {
    border-color: var(--color-border-info_subtle);
    background-color: var(--color-bg-info-primary);
    color: var(--color-text-info-primary);
  }

  &.success,
  &.success:disabled {
    border-color: var(--color-border-success);
    background-color: var(--color-bg-success-primary);
    color: var(--color-text-success-primary);
  }

  &.progress,
  &.progress:disabled {
    border-color: var(--color-border-progress);
    background-color: var(--color-bg-progress-primary);
    color: var(--color-text-progress-primary);
  }

  &.number,
  &.date,
  &.options {
    height: 24px;
  }

  &.number {
    width: auto;
  }

  &.date,
  &.options {
    width: 10rem;
  }

  &.options:not([multiple]) {
    appearance: none;
    padding-right: calc(var(--spacing-md) + var(--spacing-xl));
    background-image: var(--select-chevron);
    background-repeat: no-repeat;
    background-position: calc(100% - var(--spacing-md)) center;
  }

  &.date::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0;
  }

  &.options[multiple] {
    width: 12rem;
    min-height: 5rem;
  }
}