.ui-buttonset {
  margin-#{direction(right)}: 7px;
  .ui-button {
    margin-#{direction(left)}: 0;
    margin-#{direction(right)}: -5px;
    border-radius: 0;
    // because vendor/jqueryui/button.js:384 has specific code to decide which
    // class to apply based on if it is RTL or not, we don't need to use the
    // sass-direction helper here to flip these ourselves.
    &.ui-corner-right {
      border-top-right-radius: $baseBorderRadius;
      border-bottom-right-radius: $baseBorderRadius;
    }
    &.ui-corner-left {
      border-top-left-radius: $baseBorderRadius;
      border-bottom-left-radius: $baseBorderRadius;
    }
  }
  input[type=checkbox] + label.ui-button, input[type=radio] + label.ui-button { vertical-align: middle; }
}
