@utility input-container {
  --padding: 0.25lh 0.5lh;
  display: flex;
  flex-direction: column;
  gap: 0.25lh;

  :where(.label) {
    color: var(--text-color, inherit);
  }

  :where(.hint) {
    opacity: 0.5;
  }

  :where(.error) {
    color: red;
  }
}

@utility input-group {
  @apply pigment;
  position: relative;
  display: flex;

  /* Allow all inner items to use the same padding values */
  > *,
  > :where(astro-slot, astro-content, astro-island) > * {
    padding: var(--padding);
    border-width: 0;

    /* TODO: Remove the following and use 'card-divided-horizontal' and 'card-divided-vertical' instead. Keep padding though */
    &:where(:not(:first-child, :last-child)) {
      border-radius: 0;
    }

    /* Raise position for nicer focus */
    &:focus,
    &:focus-visible {
      z-index: 2;
    }

    &:first-child {
      border-start-start-radius: calc(var(--radius) - var(--border-width));
      border-end-start-radius: calc(var(--radius) - var(--border-width));
    }

    &:last-child {
      border-start-end-radius: calc(var(--radius) - var(--border-width));
      border-end-end-radius: calc(var(--radius) - var(--border-width));
    }
  }
}

/* Use this when you want the button or arrow to be floating over the input element. When doing this, make sure you set a minimum width for the input! (or input-group) */
.input-group.stack {
  display: grid;
}