@adobe/spectrum-css/dist/components/splitbutton/index-vars.css

The Spectrum CSS top-level backwards compatible package

null {
  --spectrum-button-primary-border-radius: 0;
  --spectrum-button-primary-border-size: 0;
  --spectrum-button-primary-padding-left: 0;
  --spectrum-button-primary-padding-right: 0;
}

.spectrum-SplitButton {
  --spectrum-splitbutton-trigger-border-left: 0;
  --spectrum-splitbutton-trigger-min-width: 0;
  --spectrum-spltibutton-margin-left: 0;
  --spectrum-splitbutton-icon-gap: var(--spectrum-global-dimension-size-150);

  --spectrum-splitbutton-border-radius-edge: var(--spectrum-alias-border-radius-small, var(--spectrum-global-dimension-size-25));
}

.spectrum-SplitButton-trigger {
  --spectrum-splitbutton-trigger-round-edge-padding: var(--spectrum-global-dimension-size-125);
  --spectrum-splitbutton-trigger-flat-edge-padding: var(--spectrum-global-dimension-size-100);

  --spectrum-splitbutton-cta-trigger-flat-edge-padding: calc(var(--spectrum-splitbutton-trigger-flat-edge-padding) - var(--spectrum-button-primary-border-size));
}

.spectrum-SplitButton-action {
  --spectrum-splitbutton-flat-edge-padding: calc(var(--spectrum-button-primary-padding-left) - var(--spectrum-button-primary-border-size) * 2);

  --spectrum-splitbutton-round-edge-padding: var(--spectrum-button-primary-padding-right);

  --spectrum-splitbutton-cta-flat-edge-padding: calc(var(--spectrum-button-primary-padding-left) - var(--spectrum-button-primary-border-size) * 3);
}

.spectrum-SplitButton {
  position: relative;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-direction: row;
      flex-direction: row;
  vertical-align: top;
}

[dir="ltr"] .spectrum-SplitButton-action {
  margin-left: 0;
}

[dir="rtl"] .spectrum-SplitButton-action {
  margin-right: 0;
}

[dir="ltr"] .spectrum-SplitButton-action {

  border-top-left-radius: var(--spectrum-button-primary-border-radius);
}

[dir="rtl"] .spectrum-SplitButton-action {

  border-top-right-radius: var(--spectrum-button-primary-border-radius);
}

[dir="ltr"] .spectrum-SplitButton-action {
  border-top-right-radius: 0;
}

[dir="rtl"] .spectrum-SplitButton-action {
  border-top-left-radius: 0;
}

[dir="ltr"] .spectrum-SplitButton-action {
  border-bottom-right-radius: 0;
}

[dir="rtl"] .spectrum-SplitButton-action {
  border-bottom-left-radius: 0;
}

[dir="ltr"] .spectrum-SplitButton-action {
  border-bottom-left-radius: var(--spectrum-button-primary-border-radius);
}

[dir="rtl"] .spectrum-SplitButton-action {
  border-bottom-right-radius: var(--spectrum-button-primary-border-radius);
}

[dir="ltr"] .spectrum-SplitButton-action {

  padding-right: var(--spectrum-splitbutton-flat-edge-padding);
}

[dir="rtl"] .spectrum-SplitButton-action {

  padding-left: var(--spectrum-splitbutton-flat-edge-padding);
}

[dir="ltr"] .spectrum-SplitButton-action {
  padding-left: var(--spectrum-splitbutton-round-edge-padding);
}

[dir="rtl"] .spectrum-SplitButton-action {
  padding-right: var(--spectrum-splitbutton-round-edge-padding);
}

[dir="ltr"] .spectrum-SplitButton-action.spectrum-Button--cta {
    padding-right: var(--spectrum-splitbutton-cta-flat-edge-padding);
}

[dir="rtl"] .spectrum-SplitButton-action.spectrum-Button--cta {
    padding-left: var(--spectrum-splitbutton-cta-flat-edge-padding);
}

[dir="ltr"] .spectrum-SplitButton-action.spectrum-Button--cta {
    margin-right: var(--spectrum-button-primary-border-size);
}

[dir="rtl"] .spectrum-SplitButton-action.spectrum-Button--cta {
    margin-left: var(--spectrum-button-primary-border-size);
}

[dir="ltr"] .spectrum-SplitButton-action:after {
    border-top-right-radius: var(--spectrum-splitbutton-border-radius-edge);
}

[dir="rtl"] .spectrum-SplitButton-action:after {
    border-top-left-radius: var(--spectrum-splitbutton-border-radius-edge);
}

[dir="ltr"] .spectrum-SplitButton-action:after {
    border-bottom-right-radius: var(--spectrum-splitbutton-border-radius-edge);
}

[dir="rtl"] .spectrum-SplitButton-action:after {
    border-bottom-left-radius: var(--spectrum-splitbutton-border-radius-edge);
}

[dir="ltr"] .spectrum-SplitButton-trigger {
  margin-left: 0;
}

[dir="rtl"] .spectrum-SplitButton-trigger {
  margin-right: 0;
}

[dir="ltr"] .spectrum-SplitButton-trigger {

  border-top-left-radius: 0;
}

[dir="rtl"] .spectrum-SplitButton-trigger {

  border-top-right-radius: 0;
}

[dir="ltr"] .spectrum-SplitButton-trigger {
  border-top-right-radius: var(--spectrum-button-primary-border-radius);
}

[dir="rtl"] .spectrum-SplitButton-trigger {
  border-top-left-radius: var(--spectrum-button-primary-border-radius);
}

[dir="ltr"] .spectrum-SplitButton-trigger {
  border-bottom-right-radius: var(--spectrum-button-primary-border-radius);
}

[dir="rtl"] .spectrum-SplitButton-trigger {
  border-bottom-left-radius: var(--spectrum-button-primary-border-radius);
}

[dir="ltr"] .spectrum-SplitButton-trigger {
  border-bottom-left-radius: 0;
}

[dir="rtl"] .spectrum-SplitButton-trigger {
  border-bottom-right-radius: 0;
}

[dir="ltr"] .spectrum-SplitButton-trigger {
  border-left-width: var(--spectrum-splitbutton-trigger-border-left);
}

[dir="rtl"] .spectrum-SplitButton-trigger {
  border-right-width: var(--spectrum-splitbutton-trigger-border-left);
}

[dir="ltr"] .spectrum-SplitButton-trigger {

  padding-left: var(--spectrum-splitbutton-trigger-flat-edge-padding);
}

[dir="rtl"] .spectrum-SplitButton-trigger {

  padding-right: var(--spectrum-splitbutton-trigger-flat-edge-padding);
}

[dir="ltr"] .spectrum-SplitButton-trigger {
  padding-right: var(--spectrum-splitbutton-trigger-round-edge-padding);
}

[dir="rtl"] .spectrum-SplitButton-trigger {
  padding-left: var(--spectrum-splitbutton-trigger-round-edge-padding);
}

.spectrum-SplitButton-trigger {

  min-width: var(--spectrum-splitbutton-trigger-min-width);
}

[dir="ltr"] .spectrum-SplitButton-trigger.spectrum-Button--cta {
    padding-left: var(--spectrum-splitbutton-cta-trigger-flat-edge-padding);
}

[dir="rtl"] .spectrum-SplitButton-trigger.spectrum-Button--cta {
    padding-right: var(--spectrum-splitbutton-cta-trigger-flat-edge-padding);
}

[dir="ltr"] .spectrum-SplitButton-trigger.spectrum-Button--cta {
    border-left-width: var(--spectrum-button-primary-border-size);
}

[dir="rtl"] .spectrum-SplitButton-trigger.spectrum-Button--cta {
    border-right-width: var(--spectrum-button-primary-border-size);
}

.spectrum-SplitButton-trigger.focus-ring {
    box-shadow: none;
  }

[dir="ltr"] .spectrum-SplitButton-trigger:after {
    border-top-left-radius: var(--spectrum-splitbutton-border-radius-edge);
}

[dir="rtl"] .spectrum-SplitButton-trigger:after {
    border-top-right-radius: var(--spectrum-splitbutton-border-radius-edge);
}

[dir="ltr"] .spectrum-SplitButton-trigger:after {
    border-bottom-left-radius: var(--spectrum-splitbutton-border-radius-edge);
}

[dir="rtl"] .spectrum-SplitButton-trigger:after {
    border-bottom-right-radius: var(--spectrum-splitbutton-border-radius-edge);
}

.spectrum-SplitButton-icon {
  display: block;
  margin-top: 1px;
}

.spectrum-SplitButton-action,
.spectrum-SplitButton-trigger {
  position: relative;
}

.spectrum-SplitButton-action:focus, .spectrum-SplitButton-trigger:focus {
    z-index: 1;
  }

[dir="ltr"] .spectrum-SplitButton-action .spectrum-Button-label + .spectrum-Icon {
    margin-left: var(--spectrum-splitbutton-icon-gap);
}

[dir="rtl"] .spectrum-SplitButton-action .spectrum-Button-label + .spectrum-Icon {
    margin-right: var(--spectrum-splitbutton-icon-gap);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-action {
    border-top-left-radius: 0;
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-action {
    border-top-right-radius: 0;
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-action {
    border-top-right-radius: var(--spectrum-button-primary-border-radius);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-action {
    border-top-left-radius: var(--spectrum-button-primary-border-radius);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-action {
    border-bottom-right-radius: var(--spectrum-button-primary-border-radius);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-action {
    border-bottom-left-radius: var(--spectrum-button-primary-border-radius);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-action {
    border-bottom-left-radius: 0;
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-action {
    border-bottom-right-radius: 0;
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-action {
    margin-right: 0;
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-action {
    margin-left: 0;
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-action {
    margin-left: var(--spectrum-spltibutton-margin-left);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-action {
    margin-right: var(--spectrum-spltibutton-margin-left);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-action {

    padding-left: var(--spectrum-splitbutton-flat-edge-padding);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-action {

    padding-right: var(--spectrum-splitbutton-flat-edge-padding);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-action {
    padding-right: var(--spectrum-splitbutton-round-edge-padding);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-action {
    padding-left: var(--spectrum-splitbutton-round-edge-padding);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-action.spectrum-Button--cta {
      padding-left: var(--spectrum-splitbutton-cta-flat-edge-padding);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-action.spectrum-Button--cta {
      padding-right: var(--spectrum-splitbutton-cta-flat-edge-padding);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-action.spectrum-Button--cta {
      margin-left: var(--spectrum-button-primary-border-size);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-action.spectrum-Button--cta {
      margin-right: var(--spectrum-button-primary-border-size);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-action:after {
      border-top-left-radius: var(--spectrum-splitbutton-border-radius-edge);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-action:after {
      border-top-right-radius: var(--spectrum-splitbutton-border-radius-edge);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-action:after {
      border-top-right-radius: var(--spectrum-button-primary-border-radius);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-action:after {
      border-top-left-radius: var(--spectrum-button-primary-border-radius);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-action:after {
      border-bottom-right-radius: var(--spectrum-button-primary-border-radius);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-action:after {
      border-bottom-left-radius: var(--spectrum-button-primary-border-radius);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-action:after {
      border-bottom-left-radius: var(--spectrum-splitbutton-border-radius-edge);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-action:after {
      border-bottom-right-radius: var(--spectrum-splitbutton-border-radius-edge);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger {
    margin-right: 0;
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger {
    margin-left: 0;
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger {

    border-top-left-radius: var(--spectrum-button-primary-border-radius);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger {

    border-top-right-radius: var(--spectrum-button-primary-border-radius);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger {
    border-top-right-radius: 0;
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger {
    border-top-left-radius: 0;
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger {
    border-bottom-right-radius: 0;
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger {
    border-bottom-left-radius: 0;
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger {
    border-bottom-left-radius: var(--spectrum-button-primary-border-radius);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger {
    border-bottom-right-radius: var(--spectrum-button-primary-border-radius);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger {

    border-left-width: var(--spectrum-button-primary-border-size);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger {

    border-right-width: var(--spectrum-button-primary-border-size);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger {
    border-right-width: var(--spectrum-splitbutton-trigger-border-left);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger {
    border-left-width: var(--spectrum-splitbutton-trigger-border-left);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger {

    padding-right: var(--spectrum-splitbutton-trigger-flat-edge-padding);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger {

    padding-left: var(--spectrum-splitbutton-trigger-flat-edge-padding);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger {
    padding-left: var(--spectrum-splitbutton-trigger-round-edge-padding);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger {
    padding-right: var(--spectrum-splitbutton-trigger-round-edge-padding);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger.spectrum-Button--cta {
      padding-right: var(--spectrum-splitbutton-cta-trigger-flat-edge-padding);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger.spectrum-Button--cta {
      padding-left: var(--spectrum-splitbutton-cta-trigger-flat-edge-padding);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger.spectrum-Button--cta {
      border-right-width: var(--spectrum-button-primary-border-size);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger.spectrum-Button--cta {
      border-left-width: var(--spectrum-button-primary-border-size);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after {
      border-top-left-radius: var(--spectrum-button-primary-border-radius);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after {
      border-top-right-radius: var(--spectrum-button-primary-border-radius);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after {
      border-top-right-radius: var(--spectrum-splitbutton-border-radius-edge);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after {
      border-top-left-radius: var(--spectrum-splitbutton-border-radius-edge);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after {
      border-bottom-right-radius: var(--spectrum-splitbutton-border-radius-edge);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after {
      border-bottom-left-radius: var(--spectrum-splitbutton-border-radius-edge);
}

[dir="ltr"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after {
      border-bottom-left-radius: var(--spectrum-button-primary-border-radius);
}

[dir="rtl"] .spectrum-SplitButton--left .spectrum-SplitButton-trigger:after {
      border-bottom-right-radius: var(--spectrum-button-primary-border-radius);
}