.vuiOptionsButtonLeft {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.vuiOptionsButtonRight {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid;
}

// Color
$colorPrimaryButton: (
  accent: rgba(var(--vui-color-empty-shade-rgb), 0.5),
  primary: rgba(var(--vui-color-empty-shade-rgb), 0.5),
  success: rgba(var(--vui-color-empty-shade-rgb), 0.5),
  danger: rgba(var(--vui-color-empty-shade-rgb), 0.5),
  warning: rgba(var(--vui-color-empty-shade-rgb), 0.5),
  subdued: rgba(var(--vui-color-dark-shade-rgb), 0.2),
  neutral: rgba(var(--vui-color-darker-shade-rgb), 0.2)
);

@each $colorName, $colorValue in $colorPrimaryButton {
  .vuiButtonPrimary.vuiOptionsButtonRight--#{$colorName} {
    border-left-color: $colorValue;
  }
}

$colorSecondaryButton: (
  accent: rgba(var(--vui-color-accent-shade-rgb), 0.3),
  primary: rgba(var(--vui-color-primary-shade-rgb), 0.3),
  success: rgba(var(--vui-color-success-shade-rgb), 0.3),
  danger: rgba(var(--vui-color-danger-shade-rgb), 0.3),
  warning: rgba(var(--vui-color-warning-shade-rgb), 0.3),
  subdued: rgba(var(--vui-color-dark-shade-rgb), 0.3),
  neutral: rgba(var(--vui-color-darker-shade-rgb), 0.2)
);

@each $colorName, $colorValue in $colorSecondaryButton {
  .vuiButtonSecondary.vuiOptionsButtonRight--#{$colorName} {
    border-left-color: $colorValue;
  }
}