// sass-lint:disable force-pseudo-nesting force-element-nesting
$button-border-radius: 2px;
$button-border-width-m: 2px;
$button-border-width-s: 1px;

.luci-button-group {
  align-items: stretch;
  background: $luci-background-color-white;
  border-radius: $luci-border-radius-default;
  display: inline-flex;
  line-height: 0;
  vertical-align: top;

  .luci-button {
    border-radius: 0;
    border-right-width: 0;
    display: block;

    .luci-button__inner {
      border-radius: 0;
      border-right-width: 0;
    }

    &:first-child {
      &,
      .luci-button__inner {
        border-radius: $button-border-radius 0 0 $button-border-radius; 
      }
    }

    &:last-child {
      &,
      .luci-button__inner {
        border-radius: 0 $button-border-radius $button-border-radius 0; 
        border-right-width: $button-border-width-m;
      }

      &.luci-button--small {
        &,
        .luci-button__inner {
          border-right-width: $button-border-width-s;
        }
      }
    }
  }

  // When focused, z-index button slightly so full focus ring is visible
  .luci-button:focus,
  .luci-button--focus,
  .luci-button__input:focus + .luci-button__inner {
    position: relative;
    z-index: $luci-z-index-low;
  }
}