picocss/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;
    }
  }
}