@layer kz-components {
  :root {
    --input-height: 48px;
  }

  .wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: var(--typography-paragraph-body-font-family);
    font-weight: var(--typography-paragraph-body-font-weight);
    font-size: var(--typography-paragraph-body-font-size);
    line-height: var(--typography-paragraph-body-line-height);
    letter-spacing: var(--typography-paragraph-body-letter-spacing);
    color: var(--color-purple-800);
  }

  /* Doubled class raises specificity to (0,2,0) to override Label's own display rule */
  .label.label {
    display: block;
    margin-bottom: var(--spacing-6);
  }

  .input {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-white);
    background-clip: padding-box;
    border: var(--border-solid-border-width) var(--border-solid-border-style) var(--color-gray-500);
    border-radius: var(--border-solid-border-radius);
    font-size: var(--typography-paragraph-body-font-size);
    line-height: var(--typography-paragraph-body-line-height);
    padding: 0 var(--spacing-sm);
    height: var(--input-height);
    width: 100%;
    box-sizing: border-box;

    &:hover,
    &:focus-within {
      border-color: var(--color-gray-600);
      background-color: var(--color-gray-200);
    }
  }

  .input:focus-within .focusRing {
    --focus-ring-offset: 3px;

    position: absolute;
    background: transparent;
    border-radius: var(--border-focus-ring-border-radius);
    border-width: var(--border-focus-ring-border-width);
    border-style: var(--border-focus-ring-border-style);
    border-color: var(--color-blue-500);
    inset: calc(-1 * var(--focus-ring-offset));
    pointer-events: none;
  }

  .isDisabled {
    pointer-events: none;
    background-color: transparent;
    border-color: var(--color-gray-500);
    opacity: 0.3;
  }

  .error {
    border: var(--border-solid-border-width) var(--border-solid-border-style) var(--color-red-500);
  }
}