/* Group: [role=group], [role=search] */
[role="search"] {
  --pico-border-radius: 5rem;
}

[role="search"],
[role="group"] {
  display: inline-flex;
  position: relative;
  width: 100%;
  margin-bottom: var(--pico-spacing);
  border-radius: var(--pico-border-radius);
  box-shadow: var(--pico-group-box-shadow, 0 0 0 transparent);
  vertical-align: middle;
  transition: box-shadow var(--pico-transition);

  & > *,
  & input:not([type="checkbox"], [type="radio"]),
  & select {
    position: relative;
    flex: 1 1 auto;
    margin-bottom: 0;
  }

  & > *:not(:first-child),
  & input:not([type="checkbox"], [type="radio"]):not(:first-child),
  & select:not(:first-child) {
    margin-inline-start: 0;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }

  & > *:not(:last-child),
  & input:not([type="checkbox"], [type="radio"]):not(:last-child),
  & select:not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }

  & > *:focus,
  & input:not([type="checkbox"], [type="radio"]):focus,
  & select:focus {
    z-index: 2;
  }

  /* Siblings overlap by one border width */
  & button:not(:first-child),
  & [type="submit"]:not(:first-child),
  & [type="reset"]:not(:first-child),
  & [type="button"]:not(:first-child),
  & [role="button"]:not(:first-child),
  & input:not([type="checkbox"], [type="radio"]):not(:first-child),
  & select:not(:first-child) {
    margin-inline-start: calc(var(--pico-border-width) * -1);
  }

  & button,
  & [type="submit"],
  & [type="reset"],
  & [type="button"],
  & [role="button"] {
    width: auto;
  }

  & button,
  & [type="submit"],
  & [type="button"],
  & [role="button"] {
    --pico-form-element-spacing-horizontal: 2rem;
  }

  /* A faint divider between two buttons, drawn in their own text color */
  &
    :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])
    + :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
    border-inline-start-color: color-mix(in oklab, currentColor 20%, transparent);
  }
}

/* One shared focus ring on the group instead of one per control */
[role="search"],
[role="group"] {
  &:has(
    button.secondary:focus-visible,
    [type="submit"].secondary:focus-visible,
    [type="button"].secondary:focus-visible,
    [role="button"].secondary:focus-visible
  ) {
    --pico-group-box-shadow-focus-with-button:
      0 0 0 var(--pico-outline-width) var(--pico-background-color),
      0 0 0 calc(var(--pico-outline-width) * 2) var(--pico-secondary-focus);
  }

  &:has(
    button.contrast:focus-visible,
    [type="submit"].contrast:focus-visible,
    [type="button"].contrast:focus-visible,
    [role="button"].contrast:focus-visible
  ) {
    --pico-group-box-shadow-focus-with-button:
      0 0 0 var(--pico-outline-width) var(--pico-background-color),
      0 0 0 calc(var(--pico-outline-width) * 2) var(--pico-contrast-focus);
  }

  &:has(
    button:focus-visible,
    [type="submit"]:focus-visible,
    [type="button"]:focus-visible,
    [role="button"]:focus-visible
  ) {
    --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button);

    & input:not([type="checkbox"], [type="radio"]),
    & select {
      border-color: transparent;
    }
  }

  &:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
    --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input);

    & button,
    & [type="submit"],
    & [type="button"],
    & [role="button"] {
      --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border);
      --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width)
        var(--pico-primary-hover-border);
    }
  }

  & button:focus,
  & [type="submit"]:focus,
  & [type="reset"]:focus,
  & [type="button"]:focus,
  & [role="button"]:focus {
    outline: none;
    box-shadow: none;
  }
}

/* Pill ends for search. These come last so they win over the flat corners above. */
[role="search"] {
  & > *:first-child {
    border-start-start-radius: 5rem;
    border-end-start-radius: 5rem;
  }

  & > *:last-child {
    border-start-end-radius: 5rem;
    border-end-end-radius: 5rem;
  }
}