.md-button-group-wrapper {
  align-items: center;
  display: flex;
  height: fit-content;
  width: fit-content;

  &[data-orientation='horizontal'] {
    flex-direction: row;

    [dir='rtl'] & {
      flex-direction: row-reverse;
    }
  }

  &[data-orientation='vertical'] {
    flex-direction: column;
  }

  &[data-separator='true'] {
    border: 1px solid var(--mds-color-theme-outline-button-normal);
  }

  &[data-spaced='true'] {
    > * {
      margin: 0.25em;

      &:first-child {
        margin-left: 0.3em;
      }

      &:last-child {
        margin-right: 0.3em;
      }
    }
  }

  &[data-spaced='false'] {
    > * {
      margin: 0;
      border-radius: 0;
    }

    &[data-orientation='horizontal'] {
      &[data-compressed='false'] {
        &[data-separator='true'] {
          [data-buttongroup-child]:not(:first-child) {
            border-image: -webkit-linear-gradient(
                top,
                rgba(1, 1, 1, 0) 25%,
                var(--mds-color-theme-outline-button-normal) 25%,
                var(--mds-color-theme-outline-button-normal) 75%,
                rgba(1, 1, 1, 0) 75%
              )
              1;
            border-image-width: 0px 0px 0px 1px;
          }

          > button,
          > mdc-button:not([data-buttongroup-child]) {
            &:not(:first-of-type) {
              border-image: -webkit-linear-gradient(
                  top,
                  rgba(1, 1, 1, 0) 25%,
                  var(--mds-color-theme-outline-button-normal) 25%,
                  var(--mds-color-theme-outline-button-normal) 75%,
                  rgba(1, 1, 1, 0) 75%
                )
                1;
              border-image-width: 0px 0px 0px 1px;
            }
          }
        }
      }
    }

    &[data-orientation='vertical'] {
      &[data-compressed='false'] {
        &[data-separator='true'] {
          > button,
          > mdc-button:not([data-buttongroup-child]) {
            &:not(:first-of-type) {
              border-image: -webkit-linear-gradient(
                  left,
                  rgba(1, 1, 1, 0) 25%,
                  var(--mds-color-theme-outline-button-normal) 25%,
                  var(--mds-color-theme-outline-button-normal) 75%,
                  rgba(1, 1, 1, 0) 75%
                )
                1;
              border-image-width: 1px 0px 0px 0px;
            }
          }
        }
      }
    }
  }

  &[data-round='true'] {
    &[data-orientation='horizontal'] {
      border-radius: 100vh;

      &[data-spaced='false'] {
        :nth-child(1 of [data-buttongroup-child]) {
          border-top-left-radius: 100vh;
          border-bottom-left-radius: 100vh;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }

        :nth-last-child(1 of [data-buttongroup-child]) {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          border-top-right-radius: 100vh;
          border-bottom-right-radius: 100vh;
        }

        > button,
        > mdc-button:not([data-buttongroup-child]) {
          &:first-of-type {
            border-top-left-radius: 100vh;
            border-bottom-left-radius: 100vh;
          }

          &:last-of-type {
            border-top-right-radius: 100vh;
            border-bottom-right-radius: 100vh;
          }
        }

        &[data-compressed='true'] {
          > :nth-child(n + 2 of [data-buttongroup-child]) {
            border-left: none;
            padding-left: 0.2rem;
          }

          > [data-buttongroup-child]:not(:last-child) {
            border-right: none;
            padding-right: 0.2rem;
          }

          > button,
          > mdc-button:not([data-buttongroup-child]) {
            &:not(:first-of-type) {
              border-left: none;
              padding-left: 0.2rem;
            }

            &:not(:last-of-type) {
              border-right: none;
              padding-right: 0.2rem;
            }
          }

          > button,
          > mdc-button:not([data-buttongroup-child]) {
            &:not(:first-of-type) {
              border-left: none;
              padding-left: 0.2rem;
            }

            &:not(:last-of-type) {
              border-right: none;
              padding-right: 0.2rem;
            }
          }
        }
      }
    }
  }

  &[data-round='true'] {
    &[data-orientation='vertical'] {
      border-radius: 100vh;

      &[data-spaced='false'] {
        > button,
        > mdc-button:not([data-buttongroup-child]) {
          &:first-of-type {
            border-top-left-radius: 100vh;
            border-top-right-radius: 100vh;
          }

          &:last-of-type {
            border-bottom-left-radius: 100vh;
            border-bottom-right-radius: 100vh;
          }
        }

        &[data-compressed='true'] {
          > button,
          > mdc-button:not([data-buttongroup-child]) {
            &:not(:first-of-type) {
              border-top: none;
              padding-top: 0.2rem;
            }

            &:not(:last-of-type) {
              border-bottom: none;
              padding-bottom: 0.2rem;
            }
          }
        }
      }
    }
  }

  &[data-round='false'] {
    &[data-compressed='true'] {
      > button,
      > mdc-button:not([data-buttongroup-child]) {
        &:not(:first-of-type) {
          border-left: none;
        }

        &:not(:last-of-type) {
          border-right: none;
        }
      }

      &[data-spaced='false'] {
        > * {
          padding-left: 0.2rem;
          padding-right: 0.2rem;
        }
      }
    }
  }
}