@import "../../style/global.scss";

$rootName: x-button-group;

.#{$rootName} {
  &&-inline {
    > .#{$rootName}-child {
      border-right-width: 0;

      &, &:active:before {
        border-radius: 0;
      }
    }

    > .#{$rootName}-first-child {
      border-right-width: 0;

      &, &:active:before {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    > .#{$rootName}-last-child {
      &, &:active:before {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }

  &&-block {
    > .#{$rootName}-first-child {
      border-bottom-width: 0;

      &, &:active:before {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    > .#{$rootName}-last-child {
      &, &:active:before {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }
    }

    > .#{$rootName}-child {
      border-bottom-width: 0;

      &, &:active:before {
        border-radius: 0;
      }
    }
  }
}