label {
  box-sizing: border-box;
  cursor: text;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;

  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--font-letter-spacing-default);
  gap: var(--typography-spacing-xs);

  background-color: var(--color-surface-primary);
  overflow: hidden;
  border: var(--border-width-sm) solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
  color: var(--color-text-body);

  // Target 1st container for icon
  span:first-child > :first-child {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  i,
  svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  //sizes
  &.sm {
    font-size: var(--typography-size-body-sm);
    line-height: var(--line-height-body-sm);
    padding: var(--scale-100) var(--scale-300);
  }

  &.md {
    font-size: var(--typography-size-body-md);
    line-height: var(--line-height-body-md);
    padding: var(--scale-200) var(--scale-400);
  }

  &.lg {
    font-size: var(--typography-size-body-lg);
    line-height: var(--line-height-body-lg);
    padding: var(--scale-250) var(--scale-600);
  }

  // states
  &:focus-visible {
    outline: var(--border-width-sm) solid var(--color-border-focus);
    outline-offset: 1px;
  }

  // status
  &:has(input[value].report-validity:invalid) {
    border-color: var(--color-border-error);

    i,
    svg {
      color: var(--color-icon-error);
    }

    &:has(input:not(:placeholder-shown)) {
      background-color: var(--color-surface-error);
    }
  }

  &:has(input[value].report-validity:valid) {
    border-color: var(--color-border-success);

    i,
    svg {
      color: var(--color-icon-success);
    }

    &:has(input:not(:placeholder-shown)) {
      background-color: var(--color-surface-success);
    }
  }

  &:has(input:disabled) {
    border-color: var(--color-border-disabled);
    background-color: var(--color-surface-disabled);
    cursor: not-allowed;

    input {
      cursor: not-allowed;
      color: var(--color-text-disabled-on);
    }

    i,
    svg {
      color: var(--color-icon-disabled);
    }

    &:has(input:not(:placeholder-shown)) {
      background-color: var(--color-surface-disabled);
    }
  }

  &:hover:not(:has(input:disabled)) {
    border-color: var(--color-border-action-hover);

    &:has(input:not(:placeholder-shown)) {
      background-color: var(--color-surface-action-solid-hover-light);
    }
  }

  input {
    font-family: var(--font-family-body);
    border: 0px solid transparent;
    appearance: none;
    background-color: transparent;
    flex: 1;

    &::placeholder {
      color: var(--color-text-disabled);
    }

    &:focus-visible {
      outline: 0px;
    }
  }
}