/**
 * Group ([role="group"], [role="search"])
 */
:where(:scope),
:host {
  --pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
    var(--pico-primary-focus);
  --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color);
}
[role="search"]:has(
  button.secondary:focus,
  [type="submit"].secondary:focus,
  [type="button"].secondary:focus,
  [role="button"].secondary:focus
),
[role="group"]:has(
  button.secondary:focus,
  [type="submit"].secondary:focus,
  [type="button"].secondary:focus,
  [role="button"].secondary:focus
) {
  --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
    var(--pico-secondary-focus);
}
[role="search"]:has(
  button.contrast:focus,
  [type="submit"].contrast:focus,
  [type="button"].contrast:focus,
  [role="button"].contrast:focus
),
[role="group"]:has(
  button.contrast:focus,
  [type="submit"].contrast:focus,
  [type="button"].contrast:focus,
  [role="button"].contrast:focus
) {
  --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
    var(--pico-contrast-focus);
}

[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 rgba(0, 0, 0, 0));
  vertical-align: middle;
  transition: box-shadow var(--pico-transition);
}
[role="search"] > *,
[role="search"] input:not([type="checkbox"], [type="radio"]),
[role="search"] select,
[role="group"] > *,
[role="group"] input:not([type="checkbox"], [type="radio"]),
[role="group"] select {
  position: relative;
  flex: 1 1 auto;
  margin-bottom: 0;
}
[role="search"] > *:not(:first-child),
[role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child),
[role="search"] select:not(:first-child),
[role="group"] > *:not(:first-child),
[role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child),
[role="group"] select:not(:first-child) {
  margin-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
[role="search"] > *:not(:last-child),
[role="search"] input:not([type="checkbox"], [type="radio"]):not(:last-child),
[role="search"] select:not(:last-child),
[role="group"] > *:not(:last-child),
[role="group"] input:not([type="checkbox"], [type="radio"]):not(:last-child),
[role="group"] select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
[role="search"] > *:focus,
[role="search"] input:not([type="checkbox"], [type="radio"]):focus,
[role="search"] select:focus,
[role="group"] > *:focus,
[role="group"] input:not([type="checkbox"], [type="radio"]):focus,
[role="group"] select:focus {
  z-index: 2;
}
[role="search"] button:not(:first-child),
[role="search"] [type="submit"]:not(:first-child),
[role="search"] [type="reset"]:not(:first-child),
[role="search"] [type="button"]:not(:first-child),
[role="search"] [role="button"]:not(:first-child),
[role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child),
[role="search"] select:not(:first-child),
[role="group"] button:not(:first-child),
[role="group"] [type="submit"]:not(:first-child),
[role="group"] [type="reset"]:not(:first-child),
[role="group"] [type="button"]:not(:first-child),
[role="group"] [role="button"]:not(:first-child),
[role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child),
[role="group"] select:not(:first-child) {
  margin-left: calc(var(--pico-border-width) * -1);
}
[role="search"] button,
[role="search"] [type="submit"],
[role="search"] [type="reset"],
[role="search"] [type="button"],
[role="search"] [role="button"],
[role="group"] button,
[role="group"] [type="submit"],
[role="group"] [type="reset"],
[role="group"] [type="button"],
[role="group"] [role="button"] {
  width: auto;
}
@supports selector(:has(*)) {
  [role="search"]:has(
    button:focus,
    [type="submit"]:focus,
    [type="button"]:focus,
    [role="button"]:focus
  ),
  [role="group"]:has(
    button:focus,
    [type="submit"]:focus,
    [type="button"]:focus,
    [role="button"]:focus
  ) {
    --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button);
  }
  [role="search"]:has(
      button:focus,
      [type="submit"]:focus,
      [type="button"]:focus,
      [role="button"]:focus
    )
    input:not([type="checkbox"], [type="radio"]),
  [role="search"]:has(
      button:focus,
      [type="submit"]:focus,
      [type="button"]:focus,
      [role="button"]:focus
    )
    select,
  [role="group"]:has(
      button:focus,
      [type="submit"]:focus,
      [type="button"]:focus,
      [role="button"]:focus
    )
    input:not([type="checkbox"], [type="radio"]),
  [role="group"]:has(
      button:focus,
      [type="submit"]:focus,
      [type="button"]:focus,
      [role="button"]:focus
    )
    select {
    border-color: transparent;
  }
  [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus),
  [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
    --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input);
  }
  [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button,
  [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
    [type="submit"],
  [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
    [type="button"],
  [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
    [role="button"],
  [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button,
  [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
    [type="submit"],
  [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
    [type="button"],
  [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
    [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);
  }
  [role="search"] button:focus,
  [role="search"] [type="submit"]:focus,
  [role="search"] [type="reset"]:focus,
  [role="search"] [type="button"]:focus,
  [role="search"] [role="button"]:focus,
  [role="group"] button:focus,
  [role="group"] [type="submit"]:focus,
  [role="group"] [type="reset"]:focus,
  [role="group"] [type="button"]:focus,
  [role="group"] [role="button"]:focus {
    box-shadow: none;
  }
}

[role="search"] > *:first-child {
  border-top-left-radius: 5rem;
  border-bottom-left-radius: 5rem;
}
[role="search"] > *:last-child {
  border-top-right-radius: 5rem;
  border-bottom-right-radius: 5rem;
}