.ui-btn__group {
  display: inline-grid;
  margin: 2px;
  vertical-align: text-top;

  $base: unquote(".ui-btn");

  #{$base}__wrapper {
    margin: 0;

    &[data-active="true"] {
      #{$base} {
        pointer-events: none;
      }
    }
  }

  #{$base}__inner {
    box-shadow: none;
  }

  &--equal {
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
  }

  &:not(&--vertical) {
    grid-auto-flow: column;

    #{$base}__wrapper:not(:first-child) {
      margin-left: -1px;
    }

    #{$base}__wrapper:not(:first-child) #{$base}__inner {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }

    #{$base}__wrapper:not(:last-child) #{$base}__inner {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }

    &#{$base}__group--with-separator {
      #{$base}__wrapper:not(:first-child) {
        #{$base}__inner #{$base} {
          @include property-prefix(padding-start, 0.5em);
        }
      }

      #{$base}__wrapper:not(:last-child) {
        #{$base}__inner #{$base} {
          @include property-prefix(padding-end, 0.5em);
        }

        &::after {
          border-radius: 1em;
          content: attr(data-separator);
          font-size: 0.8em;
          font-variant: small-caps;
          line-height: 1.25;
          padding: 0.125em 0.15em 0.15em;
          position: absolute;
          right: 0;
          top: 0.6em;
          transform: translateX(50%);
          z-index: 5;
        }

        @at-root [dir="rtl"] &::after {
          left: 0;
          right: unset;
          transform: translateX(-50%);
        }
      }
    }
  }

  &--vertical {
    grid-auto-flow: row;

    #{$base}__wrapper:not(:first-child) #{$base}__inner {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

    #{$base}__wrapper:not(:last-child) #{$base}__inner {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
}
