@layer components {
  .input {
    border-radius: var(--radius-1);
    border: solid 1px var(--gray-3);
    box-shadow: var(--shadow-1);
    display: inline-block;
    font: inherit;
    outline: none;
    padding: var(--size-2) var(--size-2);
    height: 100%;

    &:focus {
      border-color: var(--blue-8);
    }
  }

  .radio {
    margin-right: var(--size-1);
  }

  .input\:number {
    width: var(--size-8);
    text-align: right;
  }

  .input:user-invalid, .input\:error {
    background-color: var(--red-0);
    border-color: var(--red-8);
    color: var(--red-8);
  }

  .input\:full {
    width: 100%;
  }
}