// Button groups
.c-btn-group {
  display: inline-flex;
  // vertical-align: middle;

  .c-btn {
    position: relative;
    flex: 1 0 auto;
    border-left-width: 0;
  }

  > :not(:first-child):not(:last-child) > .c-btn,
  > .c-btn:not(:first-child):not(:last-child) {
    border-radius: $radius-0;
  }

  > :first-child > .c-btn,
  > .c-btn:first-child {
    border-left-width: 1px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  > :last-child > .c-btn,
  > .c-btn:last-child {
    border-left-width: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    &:hover {
      margin-right: $space-0;
    }

    &.selected,
    &:focus,
    &:active,
    &:hover {
      border-right-width: 1px;
    }
  }

  &-block {
    display: flex;
  }
}

// Button groups pill shape
@if $enable-btn-pill == true {
  .c-btn-group {
    .c-btn-pill {
      &:first-child {
        border-left-width: 1px;
        border-top-left-radius: $radius-pill;
        border-bottom-left-radius: $radius-pill;
      }

      &:last-child {
        border-left-width: 0;
        border-top-right-radius: $radius-pill;
        border-bottom-right-radius: $radius-pill;

        &:hover {
          margin-right: $space-0;
        }

        &.selected,
        &:focus,
        &:active,
        &:hover {
          border-right-width: 1px;
        }
      }
    }
  }
}

// Button groups vertival
.c-btn-group-vertical {
  display: inline-flex;
  flex-direction: column;

  .c-btn {
    margin-top: -1px;

    &:first-child:not(:only-child) {
      margin-top: $space-0;
    }

    &:first-child:not(:only-child) {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }

    &:last-child:not(:only-child) {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

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

// Button groups box sizes
@each $name, $size in $btn-box-sizes {
  .c-btn-group-#{$name} {
    .c-btn-box {
      width: $size;
      height: $size;
      text-align: center;
    }
  }
}

.c-btn-group,
.c-btn-group-vertical,
.c-btn-group-stepper {
  .c-btn:focus,
  .c-btn:active {
    z-index: 1;
  }
}