@use "./variables" as *;

.#{$component-prefix}button-group {
  display: flex;

  .#{$component-prefix}button {

    &:not(:first-child):not(:last-child) {
      border-right: 0;
      border-radius: 0;

      &::after {
        border-radius: 0;
      }
    }

    &:first-child, &:first-child::after {
      border-right-width: 0;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:last-child, &:last-child::after {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &__content::before {
      content: none;
    }
  }

  &--round {
    .#{$component-prefix}button {
      &:first-child {
        border-top-left-radius: $button-border-radius-max;
        border-bottom-left-radius: $button-border-radius-max;
      }

      &:last-child {
        border-top-right-radius: $button-border-radius-max;
        border-bottom-right-radius: $button-border-radius-max;
      }
    }
  }

  &--block {
    .#{$component-prefix}button {
      flex: 1;
    }
  }
}