picocss/scss/components/_group.scss

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

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

  #{$parent-selector} fieldset[role="group"] > legend {
    float: left;
  }

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

    > label,
    > legend {
      border-color: var(#{$css-var-prefix}secondary-background);
      background-color: var(#{$css-var-prefix}secondary-background);
      color: var(#{$css-var-prefix}secondary-inverse);
    }

    > *,
    input:not([type="checkbox"], [type="radio"]),
    select,
    > label,
    > legend,
    > details {
      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;
      }
    }

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

      &:not(:last-child) > summary {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      > summary,
      > summary:not([role]) {
        height: 100% !important;
      }
    }

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

    button,
    [type="submit"],
    [type="reset"],
    [type="button"],
    [role="button"],
    > label,
    > legend,
    > details > summary {
      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) {
        #{$css-var-prefix}group-box-shadow: var(
          #{$css-var-prefix}group-box-shadow-focus-with-button
        );

        input:not([type="checkbox"], [type="radio"]),
        select,
        > label,
        > legend,
        > details > summary {
          border-color: transparent;
        }
      }

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

        // Adapt box shadow for buttons
        button,
        [type="submit"],
        [type="button"],
        [role="button"],
        label,
        > legend,
        > details > summary {
          #{$css-var-prefix}button-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
            var(#{$css-var-prefix}primary-border);
          #{$css-var-prefix}button-hover-box-shadow: 0 0 0 var(#{$css-var-prefix}border-width)
            var(#{$css-var-prefix}primary-hover-border);
        }
      }

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

  #{$parent-selector} [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;
      }
    }
  }

  [dir="rtl"] {
    #{$parent-selector} [role="search"],
    #{$parent-selector} [role="group"] {
      > *,
      input:not([type="checkbox"], [type="radio"]),
      select,
      label,
      > legend,
      > details > summary {
        &:not(:first-child) {
          margin-right: 0;
          margin-left: auto;
          border-top-right-radius: 0;
          border-top-left-radius: var(#{$css-var-prefix}border-radius);
          border-bottom-right-radius: 0;
          border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
        }

        &:not(:last-child) {
          border-top-right-radius: var(#{$css-var-prefix}border-radius);
          border-top-left-radius: 0;
          border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
          border-bottom-left-radius: 0;
        }
      }

      button,
      [type="submit"],
      [type="reset"],
      [type="button"],
      [role="button"],
      input:not([type="checkbox"], [type="radio"]),
      select,
      label,
      > legend,
      > details > summary {
        &:not(:first-child) {
          margin-right: calc(var(#{$css-var-prefix}border-width) * -1);
          margin-left: auto;
        }
      }
    }
  }
}

@if map.get($modules, "forms/floating") {
  #{$parent-selector} [role="group"] > section[role="form"] {
    flex: 1;

    > *,
    > input:not([type="checkbox"], [type="radio"]),
    > select,
    > label,
    > legend,
    > details {
      // need to check this for details > summary
      &:focus {
        z-index: 4;
      }
    }

    > input:not([type="checkbox"], [type="radio"]),
    > select {
      &:focus {
        z-index: 10;
      }
      + label {
        z-index: 10;
        // label was positioned above placeholder..
        margin-top: 5px;
      }
    }

    &:not(:first-child) {
      > *,
      > input:not([type="checkbox"], [type="radio"]),
      > select,
      > label,
      > legend,
      > details > summary {
        margin-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    &:not(:last-child) {
      > *,
      > input:not([type="checkbox"], [type="radio"]),
      > select,
      > label,
      > legend,
      > details > summary {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
}