@import '../../assets/scss/utils/helper-classes';
@import '../../assets/scss/components/button/variables';

.st-button-group {
  $root: &;

  @include utils-clearfix;

  display: inline-block;
  vertical-align: middle;

  .st-button {
    position: relative;
    float: left;
    min-width: 150px;

    + .st-button {
      margin-left: 0;
    }

    &:hover,
    &:focus,
    &:active {
      z-index: 1;
    }

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

    &:not(:last-child) {
      margin-right: -1px;
    }

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

    &:first-child:last-child {
      border-radius: $st-button-border-radius;
    }

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

    &--active {
      z-index: 1;
    }
  }

  @each $type in ('primary', 'success', 'warning', 'danger', 'info') {
    .st-button--#{$type} {
      &:first-child {
        border-right-color: rgba($st-color-white, 0.5);
      }

      &:last-child {
        border-left-color: rgba($st-color-white, 0.5);
      }

      &:not(:first-child):not(:last-child) {
        border-right-color: rgba($st-color-white, 0.5);
        border-left-color: rgba($st-color-white, 0.5);
      }
    }
  }
}