pico/scss/components/_group.scss

@use "sass:map";
@use "../settings" as *;

@if map.get($modules, "components/group") {
  /**
   * Group ([role="group"], [role="search"])
   */

  form {
    &[role="search"],
    &[role="group"] {
      width: 100%;
    }
  }

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

      &:last-child {
        border-top-right-radius: 5rem;
        border-bottom-right-radius: 5rem;
      }
    }
  }

  [role="search"],
  [role="group"] {
    display: inline-flex;
    position: relative;
    margin-bottom: var(#{$✨}spacing);
    border-radius: var(#{$✨}border-radius);
    box-shadow: var(#{$✨}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
    vertical-align: middle;
    transition: box-shadow var(#{$✨}transition);

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

      &:not(:first-child) {
        margin-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      &:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      &:focus {
        z-index: 2;
      }
    }

    button,
    [type="submit"],
    [type="reset"],
    [type="button"],
    [role="button"],
    input:not([type="checkbox"], [type="radio"]),
    select {
      &:not(:first-child) {
        margin-left: calc(var(#{$✨}border-width) * -1);
      }
    }

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

    @supports selector(:has(*)) {
      // Group box shadow when a button is focused
      &:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
        #{$✨}group-box-shadow: var(#{$✨}group-box-shadow-focus-with-button);
      }

      // Group box shadow when an input is focused
      &:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
        #{$✨}group-box-shadow: var(#{$✨}group-box-shadow-focus-with-input);

        // Adapt box shadow for buttons
        button,
        [type="submit"],
        [type="button"],
        [role="button"] {
          #{$✨}button-box-shadow: 0 0 0 var(#{$✨}border-width) var(#{$✨}primary-border);
          #{$✨}button-hover-box-shadow: 0 0 0 var(#{$✨}border-width)
            var(#{$✨}primary-hover-border);
        }
      }

      // Remove button box shadow if we have a group box shadow
      button,
      [type="submit"],
      [type="button"],
      [role="button"] {
        &:focus {
          box-shadow: none;
        }
      }
    }
  }
}