// ********************************************
// container definition
$btn-group-container: #{$prefix}-button-group;

// ********************************************
// element definition
$btn-el: #{$prefix}-button;

.#{$btn-group-container} {
  display: flex;

  &--horizontal {
    &.#{$btn-group-container}--s {
      & > .#{$btn-el} { margin-right: space(s); }      
    } 

    &.#{$btn-group-container}--m {   
      & > .#{$btn-el} { margin-right: space(m); }         
    }    

    &.#{$btn-group-container}--l {    
      & > .#{$btn-el} { margin-right: space(l); }
    }  

    .#{$btn-el} {            
      &:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      &:not(:first-child) {
        margin-left: -1px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }

  &--vertical {
    &.#{$btn-group-container}--s {
      & > .#{$btn-el} { margin-bottom: space(s); }      
    } 

    &.#{$btn-group-container}--m {   
      & > .#{$btn-el} { margin-bottom: space(m); }         
    }    

    &.#{$btn-group-container}--l {    
      & > .#{$btn-el} { margin-bottom: space(l); }
    } 

    flex-direction: column;
  }

  .#{$btn-el} {
    &:hover { z-index: 3; }
    &:focus { z-index: 2; }
  }

}