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

The Spectrum CSS top-level backwards compatible package

.spectrum-ActionButton {
  --spectrum-button-line-height: 1.3;
  position: relative;

  display: -ms-inline-flexbox;

  display: inline-flex;
  box-sizing: border-box;

  -ms-flex-align: center;

      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  overflow: visible;
  margin: 0;

  border-style: solid;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-appearance: button;
  vertical-align: top;

  transition: background var(--spectrum-global-animation-duration-100, 130ms) ease-out,
    border-color var(--spectrum-global-animation-duration-100, 130ms) ease-out,
    color var(--spectrum-global-animation-duration-100, 130ms) ease-out,
    box-shadow var(--spectrum-global-animation-duration-100, 130ms) ease-out;

  text-decoration: none;
  font-family: var(--spectrum-alias-body-text-font-family, var(--spectrum-global-font-family-base));

  line-height: var(--spectrum-button-line-height);

  -ms-user-select: none;

      user-select: none;
  -webkit-user-select: none;
  -ms-touch-action: none;
      touch-action: none;

  cursor: pointer;
}

.spectrum-ActionButton:focus {
    outline: none;
  }

.spectrum-ActionButton::-moz-focus-inner {
    border: 0;
    border-style: none;
    padding: 0;
    margin-top: -2px;
    margin-bottom: -2px;
  }

.spectrum-ActionButton:disabled {
    cursor: default;
  }

.spectrum-ActionButton .spectrum-Icon {
  max-height: 100%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

a.spectrum-ActionButton {
  -webkit-appearance: none;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.spectrum-ActionButton-label {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  justify-self: center;
  text-align: center;
}

.spectrum-ActionButton-label:empty {
    display: none;
  }

.spectrum-ActionButton--sizeS {
  --spectrum-actionbutton-quiet-border-size: var(--spectrum-actionbutton-s-quiet-border-size, var(--spectrum-alias-border-size-thin));
  --spectrum-actionbutton-quiet-border-radius: var(--spectrum-actionbutton-s-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
  --spectrum-actionbutton-quiet-text-font-weight: var(--spectrum-actionbutton-s-quiet-text-font-weight, var(--spectrum-alias-body-text-font-weight));
  --spectrum-actionbutton-quiet-text-size: var(--spectrum-actionbutton-s-quiet-text-size, var(--spectrum-alias-item-text-size-s));
  --spectrum-actionbutton-border-size: var(--spectrum-actionbutton-s-border-size, var(--spectrum-alias-border-size-thin));
  --spectrum-actionbutton-border-radius: var(--spectrum-actionbutton-s-border-radius, var(--spectrum-alias-border-radius-regular));
  --spectrum-actionbutton-min-width: var(--spectrum-actionbutton-s-min-width, var(--spectrum-global-dimension-size-400));
  --spectrum-actionbutton-text-font-weight: var(--spectrum-actionbutton-s-text-font-weight, var(--spectrum-alias-body-text-font-weight));
  --spectrum-actionbutton-text-line-height: var(--spectrum-actionbutton-s-text-line-height, var(--spectrum-alias-component-text-line-height));
  --spectrum-actionbutton-text-size: var(--spectrum-actionbutton-s-text-size, var(--spectrum-alias-item-text-size-s));
  --spectrum-actionbutton-icon-gap: var(--spectrum-actionbutton-s-icon-gap, var(--spectrum-alias-item-workflow-icon-gap-s));
  --spectrum-actionbutton-height: var(--spectrum-actionbutton-s-height, var(--spectrum-alias-item-height-s));
  --spectrum-actionbutton-padding-left: var(--spectrum-actionbutton-s-padding-left, var(--spectrum-alias-item-workflow-padding-left-s));
  --spectrum-actionbutton-padding-right: var(--spectrum-actionbutton-s-padding-right, var(--spectrum-alias-item-padding-s));
  --spectrum-actionbutton-icononly-padding-left: var(--spectrum-actionbutton-s-icononly-padding-left, var(--spectrum-alias-item-icononly-padding-s));
  --spectrum-actionbutton-icononly-padding-right: var(--spectrum-actionbutton-s-icononly-padding-right, var(--spectrum-alias-item-icononly-padding-s));
  --spectrum-actionbutton-textonly-padding-left: var(--spectrum-actionbutton-s-textonly-padding-left, var(--spectrum-alias-item-padding-s));
  --spectrum-actionbutton-textonly-padding-right: var(--spectrum-actionbutton-s-textonly-padding-right, var(--spectrum-alias-item-padding-s));
  --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-25);
  --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-25);
}

.spectrum-ActionButton--sizeM {
  --spectrum-actionbutton-quiet-border-size: var(--spectrum-actionbutton-m-quiet-border-size, var(--spectrum-alias-border-size-thin));
  --spectrum-actionbutton-quiet-border-radius: var(--spectrum-actionbutton-m-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
  --spectrum-actionbutton-quiet-text-font-weight: var(--spectrum-actionbutton-m-quiet-text-font-weight, var(--spectrum-alias-body-text-font-weight));
  --spectrum-actionbutton-quiet-text-size: var(--spectrum-actionbutton-m-quiet-text-size, var(--spectrum-alias-item-text-size-m));
  --spectrum-actionbutton-border-size: var(--spectrum-actionbutton-m-border-size, var(--spectrum-alias-border-size-thin));
  --spectrum-actionbutton-border-radius: var(--spectrum-actionbutton-m-border-radius, var(--spectrum-alias-border-radius-regular));
  --spectrum-actionbutton-min-width: var(--spectrum-actionbutton-m-min-width, var(--spectrum-global-dimension-size-400));
  --spectrum-actionbutton-text-font-weight: var(--spectrum-actionbutton-m-text-font-weight, var(--spectrum-alias-body-text-font-weight));
  --spectrum-actionbutton-text-line-height: var(--spectrum-actionbutton-m-text-line-height, var(--spectrum-alias-component-text-line-height));
  --spectrum-actionbutton-text-size: var(--spectrum-actionbutton-m-text-size, var(--spectrum-alias-item-text-size-m));
  --spectrum-actionbutton-height: var(--spectrum-actionbutton-m-height, var(--spectrum-alias-item-height-m));
  --spectrum-actionbutton-icon-gap: var(--spectrum-actionbutton-m-icon-gap, var(--spectrum-alias-item-workflow-icon-gap-m));
  --spectrum-actionbutton-padding-left: var(--spectrum-actionbutton-m-padding-left, var(--spectrum-alias-item-workflow-padding-left-m));
  --spectrum-actionbutton-padding-right: var(--spectrum-actionbutton-m-padding-right, var(--spectrum-alias-item-padding-m));
  --spectrum-actionbutton-icononly-padding-left: var(--spectrum-actionbutton-m-icononly-padding-left, var(--spectrum-alias-item-icononly-padding-m));
  --spectrum-actionbutton-icononly-padding-right: var(--spectrum-actionbutton-m-icononly-padding-right, var(--spectrum-alias-item-icononly-padding-m));
  --spectrum-actionbutton-textonly-padding-left: var(--spectrum-actionbutton-m-textonly-padding-left, var(--spectrum-alias-item-padding-m));
  --spectrum-actionbutton-textonly-padding-right: var(--spectrum-actionbutton-m-textonly-padding-right, var(--spectrum-alias-item-padding-m));
  --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-40);
  --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-40);
}

.spectrum-ActionButton--sizeL {
  --spectrum-actionbutton-quiet-border-size: var(--spectrum-actionbutton-l-quiet-border-size, var(--spectrum-alias-border-size-thin));
  --spectrum-actionbutton-quiet-border-radius: var(--spectrum-actionbutton-l-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
  --spectrum-actionbutton-quiet-text-font-weight: var(--spectrum-actionbutton-l-quiet-text-font-weight, var(--spectrum-alias-body-text-font-weight));
  --spectrum-actionbutton-quiet-text-size: var(--spectrum-actionbutton-l-quiet-text-size, var(--spectrum-alias-item-text-size-l));
  --spectrum-actionbutton-border-size: var(--spectrum-actionbutton-l-border-size, var(--spectrum-alias-border-size-thin));
  --spectrum-actionbutton-border-radius: var(--spectrum-actionbutton-l-border-radius, var(--spectrum-alias-border-radius-regular));
  --spectrum-actionbutton-min-width: var(--spectrum-actionbutton-l-min-width, var(--spectrum-global-dimension-size-400));
  --spectrum-actionbutton-text-font-weight: var(--spectrum-actionbutton-l-text-font-weight, var(--spectrum-alias-body-text-font-weight));
  --spectrum-actionbutton-text-line-height: var(--spectrum-actionbutton-l-text-line-height, var(--spectrum-alias-component-text-line-height));
  --spectrum-actionbutton-text-size: var(--spectrum-actionbutton-l-text-size, var(--spectrum-alias-item-text-size-l));
  --spectrum-actionbutton-icon-gap: var(--spectrum-actionbutton-l-icon-gap, var(--spectrum-alias-item-workflow-icon-gap-l));
  --spectrum-actionbutton-height: var(--spectrum-actionbutton-l-height, var(--spectrum-alias-item-height-l));
  --spectrum-actionbutton-padding-left: var(--spectrum-actionbutton-l-padding-left, var(--spectrum-alias-item-workflow-padding-left-l));
  --spectrum-actionbutton-padding-right: var(--spectrum-actionbutton-l-padding-right, var(--spectrum-alias-item-padding-l));
  --spectrum-actionbutton-icononly-padding-left: var(--spectrum-actionbutton-l-icononly-padding-left, var(--spectrum-alias-item-icononly-padding-l));
  --spectrum-actionbutton-icononly-padding-right: var(--spectrum-actionbutton-l-icononly-padding-right, var(--spectrum-alias-item-icononly-padding-l));
  --spectrum-actionbutton-textonly-padding-left: var(--spectrum-actionbutton-l-textonly-padding-left, var(--spectrum-alias-item-padding-l));
  --spectrum-actionbutton-textonly-padding-right: var(--spectrum-actionbutton-l-textonly-padding-right, var(--spectrum-alias-item-padding-l));
  --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-50);
  --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-50);
}

.spectrum-ActionButton--sizeXL {
  --spectrum-actionbutton-quiet-border-size: var(--spectrum-actionbutton-xl-quiet-border-size, var(--spectrum-alias-border-size-thin));
  --spectrum-actionbutton-quiet-border-radius: var(--spectrum-actionbutton-xl-quiet-border-radius, var(--spectrum-alias-border-radius-regular));
  --spectrum-actionbutton-quiet-text-font-weight: var(--spectrum-actionbutton-xl-quiet-text-font-weight, var(--spectrum-alias-body-text-font-weight));
  --spectrum-actionbutton-quiet-text-size: var(--spectrum-actionbutton-xl-quiet-text-size, var(--spectrum-alias-item-text-size-xl));
  --spectrum-actionbutton-border-size: var(--spectrum-actionbutton-xl-border-size, var(--spectrum-alias-border-size-thin));
  --spectrum-actionbutton-border-radius: var(--spectrum-actionbutton-xl-border-radius, var(--spectrum-alias-border-radius-regular));
  --spectrum-actionbutton-min-width: var(--spectrum-actionbutton-xl-min-width, var(--spectrum-global-dimension-size-400));
  --spectrum-actionbutton-text-font-weight: var(--spectrum-actionbutton-xl-text-font-weight, var(--spectrum-alias-body-text-font-weight));
  --spectrum-actionbutton-text-line-height: var(--spectrum-actionbutton-xl-text-line-height, var(--spectrum-alias-component-text-line-height));
  --spectrum-actionbutton-icon-gap: var(--spectrum-actionbutton-xl-icon-gap, var(--spectrum-alias-item-workflow-icon-gap-l));
  --spectrum-actionbutton-text-size: var(--spectrum-actionbutton-xl-text-size, var(--spectrum-alias-item-text-size-xl));
  --spectrum-actionbutton-height: var(--spectrum-actionbutton-xl-height, var(--spectrum-alias-item-height-xl));
  --spectrum-actionbutton-padding-left: var(--spectrum-actionbutton-xl-padding-left, var(--spectrum-alias-item-workflow-padding-left-xl));
  --spectrum-actionbutton-padding-right: var(--spectrum-actionbutton-xl-padding-right, var(--spectrum-alias-item-padding-xl));
  --spectrum-actionbutton-icononly-padding-left: var(--spectrum-actionbutton-xl-icononly-padding-left, var(--spectrum-alias-item-icononly-padding-xl));
  --spectrum-actionbutton-icononly-padding-right: var(--spectrum-actionbutton-xl-icononly-padding-right, var(--spectrum-alias-item-icononly-padding-xl));
  --spectrum-actionbutton-textonly-padding-left: var(--spectrum-actionbutton-xl-textonly-padding-left, var(--spectrum-alias-item-padding-xl));
  --spectrum-actionbutton-textonly-padding-right: var(--spectrum-actionbutton-xl-textonly-padding-right, var(--spectrum-alias-item-padding-xl));
  --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-65);
  --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-65);
}

.spectrum-ActionButton {
  --spectrum-actionbutton-padding-left-adjusted: calc(var(--spectrum-actionbutton-padding-left) - var(--spectrum-actionbutton-border-size));
  --spectrum-actionbutton-textonly-padding-left-adjusted: calc(var(--spectrum-actionbutton-textonly-padding-left) - var(--spectrum-actionbutton-border-size));
  --spectrum-actionbutton-textonly-padding-right-adjusted: calc(var(--spectrum-actionbutton-textonly-padding-right) - var(--spectrum-actionbutton-border-size));
  --spectrum-actionbutton-icononly-padding-left-adjusted: calc(var(--spectrum-actionbutton-icononly-padding-left) - var(--spectrum-actionbutton-border-size));
  --spectrum-actionbutton-icononly-padding-right-adjusted: calc(var(--spectrum-actionbutton-icononly-padding-right) - var(--spectrum-actionbutton-border-size));
}

[dir="ltr"] .spectrum-ActionButton {
  padding-left: var(--spectrum-actionbutton-textonly-padding-left-adjusted);
  padding-right: var(--spectrum-actionbutton-textonly-padding-right-adjusted);
}

[dir="rtl"] .spectrum-ActionButton {
  padding-right: var(--spectrum-actionbutton-textonly-padding-left-adjusted);
  padding-left: var(--spectrum-actionbutton-textonly-padding-right-adjusted);
}

.spectrum-ActionButton {
  position: relative;

  height: var(--spectrum-actionbutton-height);
  min-width: var(--spectrum-actionbutton-min-width);

  border-width: var(--spectrum-actionbutton-border-size);
  border-radius: var(--spectrum-actionbutton-border-radius);

  font-size: var(--spectrum-actionbutton-text-size);
  font-weight: var(--spectrum-actionbutton-text-font-weight);
  line-height: var(--spectrum-actionbutton-text-line-height);
}

[dir="ltr"] .spectrum-ActionButton .spectrum-Icon {
    margin-left: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted)));
}

[dir="rtl"] .spectrum-ActionButton .spectrum-Icon {
    margin-right: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted)));
}

[dir="ltr"] .spectrum-ActionButton .spectrum-Icon + .spectrum-ActionButton-label {
    padding-left: var(--spectrum-actionbutton-icon-gap);
}

[dir="rtl"] .spectrum-ActionButton .spectrum-Icon + .spectrum-ActionButton-label {
    padding-right: var(--spectrum-actionbutton-icon-gap);
}

[dir="ltr"] .spectrum-ActionButton .spectrum-Icon + .spectrum-ActionButton-label {
    padding-right: 0;
}

[dir="rtl"] .spectrum-ActionButton .spectrum-Icon + .spectrum-ActionButton-label {
    padding-left: 0;
}

.spectrum-ActionButton .spectrum-ActionButton-hold + .spectrum-Icon,
  .spectrum-ActionButton .spectrum-Icon:only-child {
    margin-left: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-icononly-padding-left-adjusted)));
    margin-right: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-right-adjusted) - var(--spectrum-actionbutton-icononly-padding-right-adjusted)));
  }

.spectrum-ActionButton-label {

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[dir="ltr"] .spectrum-ActionButton-hold {
  right: var(--spectrum-actionbutton-hold-icon-padding-right);
}

[dir="rtl"] .spectrum-ActionButton-hold {
  left: var(--spectrum-actionbutton-hold-icon-padding-right);
}

[dir="rtl"] .spectrum-ActionButton-hold { transform: matrix(-1, 0, 0, 1, 0, 0) ; }

.spectrum-ActionButton-hold {
  position: absolute;
  bottom: var(--spectrum-actionbutton-hold-icon-padding-bottom);
}

.spectrum-ActionButton--quiet {
  border-width: var(--spectrum-actionbutton-quiet-border-size);
  border-radius: var(--spectrum-actionbutton-quiet-border-radius);

  font-size: var(--spectrum-actionbutton-quiet-text-size);
  font-weight: var(--spectrum-actionbutton-quiet-text-font-weight);
}

.spectrum-ActionButton {
  --spectrum-actionbutton-m-quiet-border-size-key-focus: 1px;
}

.spectrum-ActionButton {
  background-color: var(--spectrum-actionbutton-m-background-color, var(--spectrum-global-color-gray-75));
  border-color: var(--spectrum-actionbutton-m-border-color, var(--spectrum-alias-border-color));
  color: var(--spectrum-actionbutton-m-text-color, var(--spectrum-alias-text-color));
}

.spectrum-ActionButton .spectrum-Icon {
    color: var(--spectrum-actionbutton-m-icon-color, var(--spectrum-alias-icon-color));
  }

.spectrum-ActionButton .spectrum-ActionButton-hold {
    color: var(--spectrum-actionbutton-m-hold-icon-color, var(--spectrum-alias-icon-color));
  }

.spectrum-ActionButton:hover {
    background-color: var(--spectrum-actionbutton-m-background-color-hover, var(--spectrum-global-color-gray-50));
    border-color: var(--spectrum-actionbutton-m-border-color-hover, var(--spectrum-alias-border-color-hover));
    color: var(--spectrum-actionbutton-m-text-color-hover, var(--spectrum-alias-text-color-hover));
  }

.spectrum-ActionButton:hover .spectrum-Icon {
      color: var(--spectrum-actionbutton-m-icon-color-hover, var(--spectrum-alias-icon-color-hover));
    }

.spectrum-ActionButton:hover .spectrum-ActionButton-hold {
      color: var(--spectrum-actionbutton-m-hold-icon-color-hover, var(--spectrum-alias-icon-color-hover));
    }

.spectrum-ActionButton.focus-ring {
    background-color: var(--spectrum-actionbutton-m-background-color-key-focus, var(--spectrum-global-color-gray-50));
    border-color: var(--spectrum-actionbutton-m-border-color-key-focus, var(--spectrum-alias-border-color-focus));
    box-shadow: 0 0 0 var(--spectrum-actionbutton-m-quiet-border-size-key-focus, var(--spectrum-alias-border-size-thick)) var(--spectrum-actionbutton-m-border-color-key-focus, var(--spectrum-alias-border-color-focus));
    color: var(--spectrum-actionbutton-m-text-color-key-focus, var(--spectrum-alias-text-color-hover));
  }

.spectrum-ActionButton.focus-ring:active {
      border-color: var(--spectrum-actionbutton-m-border-color-key-focus, var(--spectrum-alias-border-color-focus));
    }

.spectrum-ActionButton.focus-ring .spectrum-Icon {
      color: var(--spectrum-actionbutton-m-icon-color-key-focus, var(--spectrum-alias-icon-color-focus));
    }

.spectrum-ActionButton.focus-ring .spectrum-ActionButton-hold {
      color: var(--spectrum-actionbutton-m-hold-icon-color-key-focus, var(--spectrum-alias-icon-color-hover));
    }

.spectrum-ActionButton:active {
    background-color: var(--spectrum-actionbutton-m-background-color-down, var(--spectrum-global-color-gray-200));
    border-color: var(--spectrum-actionbutton-m-border-color-down, var(--spectrum-alias-border-color-down));
    color: var(--spectrum-actionbutton-m-text-color-down, var(--spectrum-alias-text-color-down));
  }

.spectrum-ActionButton:active .spectrum-ActionButton-hold {
      color: var(--spectrum-actionbutton-m-hold-icon-color-down, var(--spectrum-alias-icon-color-down));
    }

.spectrum-ActionButton:disabled,
  .spectrum-ActionButton.is-disabled {
    background-color: var(--spectrum-actionbutton-m-background-color-disabled, var(--spectrum-global-color-gray-200));
    border-color: var(--spectrum-actionbutton-m-border-color-disabled, var(--spectrum-alias-border-color-disabled));
    color: var(--spectrum-actionbutton-m-text-color-disabled, var(--spectrum-alias-text-color-disabled));
  }

.spectrum-ActionButton:disabled .spectrum-Icon, .spectrum-ActionButton.is-disabled .spectrum-Icon {
      color: var(--spectrum-actionbutton-m-icon-color-disabled, var(--spectrum-alias-icon-color-disabled));
    }

.spectrum-ActionButton:disabled .spectrum-ActionButton-hold, .spectrum-ActionButton.is-disabled .spectrum-ActionButton-hold {
      color: var(--spectrum-actionbutton-m-hold-icon-color-disabled, var(--spectrum-alias-icon-color-disabled));
    }

.spectrum-ActionButton.is-selected {
    background-color: var(--spectrum-actionbutton-m-background-color-selected, var(--spectrum-global-color-gray-200));
    border-color: var(--spectrum-actionbutton-m-border-color-selected, var(--spectrum-alias-border-color));
    color: var(--spectrum-actionbutton-m-text-color-selected, var(--spectrum-alias-text-color));
  }

.spectrum-ActionButton.is-selected .spectrum-Icon {
      color: var(--spectrum-actionbutton-m-icon-color-selected, var(--spectrum-alias-icon-color));
    }

.spectrum-ActionButton.is-selected.focus-ring {
      background-color: var(--spectrum-actionbutton-m-background-color-selected-key-focus, var(--spectrum-global-color-gray-200));
      border-color: var(--spectrum-actionbutton-m-border-color-selected-key-focus, var(--spectrum-alias-border-color-focus));
      color: var(--spectrum-actionbutton-m-text-color-selected-key-focus, var(--spectrum-alias-text-color-hover));
    }

.spectrum-ActionButton.is-selected.focus-ring:active {
        border-color: var(--spectrum-actionbutton-m-border-color-key-focus, var(--spectrum-alias-border-color-focus));
      }

.spectrum-ActionButton.is-selected.focus-ring .spectrum-Icon {
        color: var(--spectrum-actionbutton-m-icon-color-selected-key-focus, var(--spectrum-alias-icon-color-hover));
      }

.spectrum-ActionButton.is-selected:hover {
      background-color: var(--spectrum-actionbutton-m-background-color-selected-hover, var(--spectrum-global-color-gray-200));
      border-color: var(--spectrum-actionbutton-m-border-color-selected-hover, var(--spectrum-alias-border-color-hover));
      color: var(--spectrum-actionbutton-m-text-color-selected-hover, var(--spectrum-alias-text-color-hover));
    }

.spectrum-ActionButton.is-selected:hover .spectrum-Icon {
        color: var(--spectrum-actionbutton-m-icon-color-selected-hover, var(--spectrum-alias-icon-color-hover));
      }

.spectrum-ActionButton.is-selected:active {
      background-color: var(--spectrum-actionbutton-m-background-color-selected-down, var(--spectrum-global-color-gray-200));
      border-color: var(--spectrum-actionbutton-m-border-color-selected-down, var(--spectrum-alias-border-color-down));
      color: var(--spectrum-actionbutton-m-text-color-selected-down, var(--spectrum-alias-text-color-down));
    }

.spectrum-ActionButton.is-selected:active .spectrum-Icon {
        color: var(--spectrum-actionbutton-m-icon-color-selected-down, var(--spectrum-alias-icon-color-down));
      }

.spectrum-ActionButton.is-selected:disabled,
    .spectrum-ActionButton.is-selected.is-disabled {
      background-color: var(--spectrum-actionbutton-m-background-color-selected-disabled, var(--spectrum-global-color-gray-200));
      border-color: var(--spectrum-actionbutton-m-border-color-selected-disabled, var(--spectrum-alias-border-color-disabled));
      color: var(--spectrum-actionbutton-m-text-color-selected-disabled, var(--spectrum-alias-text-color-disabled));
    }

.spectrum-ActionButton.is-selected:disabled .spectrum-Icon, .spectrum-ActionButton.is-selected.is-disabled .spectrum-Icon {
        color: var(--spectrum-actionbutton-m-icon-color-selected-disabled, var(--spectrum-alias-icon-color-disabled));
      }

.spectrum-ActionButton--emphasized {
  background-color: var(--spectrum-actionbutton-m-emphasized-background-color, var(--spectrum-global-color-gray-75));
  border-color: var(--spectrum-actionbutton-m-emphasized-border-color, var(--spectrum-alias-border-color));
  color: var(--spectrum-actionbutton-m-emphasized-text-color, var(--spectrum-alias-text-color));
}

.spectrum-ActionButton--emphasized .spectrum-Icon {
    color: var(--spectrum-actionbutton-m-emphasized-icon-color, var(--spectrum-alias-icon-color));
  }

.spectrum-ActionButton--emphasized .spectrum-ActionButton-hold {
    color: var(--spectrum-actionbutton-m-emphasized-hold-icon-color, var(--spectrum-alias-icon-color));
  }

.spectrum-ActionButton--emphasized.is-selected .spectrum-ActionButton-hold {
      color: var(--spectrum-actionbutton-m-emphasized-hold-icon-color-selected, var(--spectrum-global-color-static-white));
    }

.spectrum-ActionButton--emphasized.is-selected:hover .spectrum-ActionButton-hold {
        color: var(--spectrum-actionbutton-m-emphasized-text-color-selected-hover, var(--spectrum-global-color-static-white));
      }

.spectrum-ActionButton--emphasized:hover {
    background-color: var(--spectrum-actionbutton-m-emphasized-background-color-hover, var(--spectrum-global-color-gray-50));
    border-color: var(--spectrum-actionbutton-m-emphasized-border-color-hover, var(--spectrum-alias-border-color-hover));
    box-shadow: none;
    color: var(--spectrum-actionbutton-m-emphasized-text-color-hover, var(--spectrum-alias-text-color-hover));
  }

.spectrum-ActionButton--emphasized:hover .spectrum-Icon {
      color: var(--spectrum-actionbutton-m-emphasized-icon-color-hover, var(--spectrum-alias-icon-color-hover));
    }

.spectrum-ActionButton--emphasized:hover .spectrum-ActionButton-hold {
      color: var(--spectrum-actionbutton-m-emphasized-hold-icon-color-hover, var(--spectrum-alias-icon-color-hover));
    }

.spectrum-ActionButton--emphasized.focus-ring {
    background-color: var(--spectrum-actionbutton-m-emphasized-background-color-key-focus, var(--spectrum-global-color-gray-50));
    border-color: var(--spectrum-actionbutton-m-emphasized-border-color-key-focus, var(--spectrum-alias-border-color-hover));
    box-shadow: 0 0 0 var(--spectrum-actionbutton-m-quiet-border-size-key-focus, var(--spectrum-alias-border-size-thick)) var(--spectrum-actionbutton-m-border-color-key-focus, var(--spectrum-alias-border-color-focus));
    color: var(--spectrum-actionbutton-m-emphasized-text-color-key-focus, var(--spectrum-alias-text-color-hover));
  }

.spectrum-ActionButton--emphasized.focus-ring .spectrum-Icon {
      color: var(--spectrum-actionbutton-m-emphasized-icon-color-key-focus, var(--spectrum-alias-icon-color-focus));
    }

.spectrum-ActionButton--emphasized.focus-ring .spectrum-ActionButton-hold {
      color: var(--spectrum-actionbutton-m-emphasized-hold-icon-color-key-focus, var(--spectrum-alias-icon-color-hover));
    }

.spectrum-ActionButton--emphasized.is-active {
    background-color: var(--spectrum-actionbutton-m-emphasized-background-color-down, var(--spectrum-global-color-gray-200));
    border-color: var(--spectrum-actionbutton-m-emphasized-border-color-down, var(--spectrum-alias-border-color-down));
    box-shadow: none;
    color: var(--spectrum-actionbutton-m-emphasized-text-color-down, var(--spectrum-alias-text-color-down));
  }

.spectrum-ActionButton--emphasized.is-active .spectrum-ActionButton-hold {
      color: var(--spectrum-actionbutton-m-emphasized-hold-icon-color-down, var(--spectrum-alias-icon-color-down));
    }

.spectrum-ActionButton--emphasized:disabled,
  .spectrum-ActionButton--emphasized.is-disabled {
    background-color: var(--spectrum-actionbutton-m-emphasized-background-color-disabled, var(--spectrum-global-color-gray-200));
    border-color: var(--spectrum-actionbutton-m-emphasized-border-color-disabled, var(--spectrum-alias-border-color-disabled));
    color: var(--spectrum-actionbutton-m-emphasized-text-color-disabled, var(--spectrum-alias-text-color-disabled));
  }

.spectrum-ActionButton--emphasized:disabled .spectrum-Icon, .spectrum-ActionButton--emphasized.is-disabled .spectrum-Icon {
      color: var(--spectrum-actionbutton-m-emphasized-icon-color-disabled, var(--spectrum-alias-icon-color-disabled));
    }

.spectrum-ActionButton--emphasized:disabled .spectrum-ActionButton-hold, .spectrum-ActionButton--emphasized.is-disabled .spectrum-ActionButton-hold {
      color: var(--spectrum-actionbutton-m-emphasized-hold-icon-color-disabled, var(--spectrum-alias-icon-color-disabled));
    }

.spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected,
  .spectrum-ActionButton--emphasized.is-selected {
    background-color: var(--spectrum-actionbutton-m-emphasized-background-color-selected, var(--spectrum-semantic-cta-color-background-default));
    border-color: var(--spectrum-actionbutton-m-emphasized-border-color-selected, var(--spectrum-semantic-cta-color-background-default));
    color: var(--spectrum-actionbutton-m-emphasized-text-color-selected, var(--spectrum-global-color-static-white));
  }

.spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected .spectrum-Icon, .spectrum-ActionButton--emphasized.is-selected .spectrum-Icon {
      color: var(--spectrum-actionbutton-m-emphasized-icon-color-selected, var(--spectrum-global-color-static-white));
    }

.spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.focus-ring, .spectrum-ActionButton--emphasized.is-selected.focus-ring {
      background-color: var(--spectrum-actionbutton-m-emphasized-background-color-selected-key-focus, var(--spectrum-semantic-cta-color-background-key-focus));
      border-color: var(--spectrum-actionbutton-m-emphasized-border-color-selected-key-focus, var(--spectrum-semantic-cta-color-background-key-focus));
      color: var(--spectrum-actionbutton-m-emphasized-text-color-selected-key-focus, var(--spectrum-global-color-static-white));
    }

.spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.focus-ring .spectrum-Icon, .spectrum-ActionButton--emphasized.is-selected.focus-ring .spectrum-Icon {
        color: var(--spectrum-actionbutton-m-emphasized-icon-color-selected-key-focus, var(--spectrum-global-color-static-white));
      }

.spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected:hover, .spectrum-ActionButton--emphasized.is-selected:hover {
      background-color: var(--spectrum-actionbutton-m-emphasized-background-color-selected-hover, var(--spectrum-semantic-cta-color-background-hover));
      border-color: var(--spectrum-actionbutton-m-emphasized-border-color-selected-hover, var(--spectrum-semantic-cta-color-background-hover));
      color: var(--spectrum-actionbutton-m-emphasized-text-color-selected-hover, var(--spectrum-global-color-static-white));
    }

.spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected:hover .spectrum-Icon, .spectrum-ActionButton--emphasized.is-selected:hover .spectrum-Icon {
        color: var(--spectrum-actionbutton-m-emphasized-icon-color-selected-hover, var(--spectrum-global-color-static-white));
      }

.spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-active, .spectrum-ActionButton--emphasized.is-selected.is-active {
      background-color: var(--spectrum-actionbutton-m-emphasized-background-color-selected-down, var(--spectrum-semantic-cta-color-background-down));
      border-color: var(--spectrum-actionbutton-m-emphasized-border-color-selected-down, var(--spectrum-semantic-cta-color-background-down));
      color: var(--spectrum-actionbutton-m-emphasized-text-color-selected-down, var(--spectrum-global-color-static-white));
    }

.spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-active .spectrum-Icon, .spectrum-ActionButton--emphasized.is-selected.is-active .spectrum-Icon {
        color: var(--spectrum-actionbutton-m-emphasized-icon-color-selected-down, var(--spectrum-global-color-static-white));
      }

.spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected:disabled,
    .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-disabled,
    .spectrum-ActionButton--emphasized.is-selected:disabled,
    .spectrum-ActionButton--emphasized.is-selected.is-disabled {
      background-color: var(--spectrum-actionbutton-m-emphasized-background-color-selected-disabled, var(--spectrum-global-color-gray-200));
      border-color: var(--spectrum-actionbutton-m-emphasized-border-color-selected-disabled, var(--spectrum-alias-border-color-disabled));
      color: var(--spectrum-actionbutton-m-emphasized-text-color-selected-disabled, var(--spectrum-alias-text-color-disabled));
    }

.spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected:disabled .spectrum-Icon, .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.is-disabled .spectrum-Icon, .spectrum-ActionButton--emphasized.is-selected:disabled .spectrum-Icon, .spectrum-ActionButton--emphasized.is-selected.is-disabled .spectrum-Icon {
        color: var(--spectrum-actionbutton-m-emphasized-icon-color-selected-disabled, var(--spectrum-alias-icon-color-disabled));
      }

.spectrum-ActionButton--quiet {
  background-color: var(--spectrum-actionbutton-m-quiet-background-color, var(--spectrum-alias-background-color-transparent));
  border-color: var(--spectrum-actionbutton-m-quiet-border-color, var(--spectrum-alias-border-color-transparent));
  color: var(--spectrum-actionbutton-m-quiet-text-color, var(--spectrum-alias-text-color));
}

.spectrum-ActionButton--quiet:hover {
    background-color: var(--spectrum-actionbutton-m-quiet-background-color-hover, var(--spectrum-alias-background-color-transparent));
    border-color: var(--spectrum-actionbutton-m-quiet-border-color-hover, var(--spectrum-alias-border-color-transparent));
    color: var(--spectrum-actionbutton-m-quiet-text-color-hover, var(--spectrum-alias-text-color-hover));
  }

.spectrum-ActionButton--quiet.focus-ring {
    background-color: var(--spectrum-actionbutton-m-quiet-background-color-key-focus, var(--spectrum-alias-background-color-transparent));
    box-shadow: 0 0 0 var(--spectrum-actionbutton-m-quiet-border-size-key-focus, var(--spectrum-alias-border-size-thick)) var(--spectrum-actionbutton-m-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
    border-color: var(--spectrum-actionbutton-m-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
    color: var(--spectrum-actionbutton-m-quiet-text-color-key-focus, var(--spectrum-alias-text-color-hover));
  }

.spectrum-ActionButton--quiet:active {
    background-color: var(--spectrum-actionbutton-m-quiet-background-color-down, var(--spectrum-global-color-gray-300));
    border-color: var(--spectrum-actionbutton-m-quiet-border-color-down, var(--spectrum-alias-border-color-transparent));
    color: var(--spectrum-actionbutton-m-quiet-text-color-down, var(--spectrum-alias-text-color-down));
  }

.spectrum-ActionButton--quiet:disabled,
  .spectrum-ActionButton--quiet.is-disabled {
    background-color: var(--spectrum-actionbutton-m-quiet-background-color-disabled, var(--spectrum-alias-background-color-transparent));
    border-color: var(--spectrum-actionbutton-m-quiet-border-color-disabled, var(--spectrum-alias-border-color-transparent));
    color: var(--spectrum-actionbutton-m-quiet-text-color-disabled, var(--spectrum-alias-text-color-disabled));
  }

.spectrum-ActionButton--quiet.is-selected {
    background-color: var(--spectrum-actionbutton-m-quiet-background-color-selected, var(--spectrum-global-color-gray-200));
    border-color: var(--spectrum-actionbutton-m-quiet-border-color-selected, var(--spectrum-alias-border-color-transparent));
    color: var(--spectrum-actionbutton-m-quiet-text-color-selected, var(--spectrum-alias-text-color));
  }

.spectrum-ActionButton--quiet.is-selected.focus-ring {
      background-color: var(--spectrum-actionbutton-m-quiet-background-color-selected-key-focus, var(--spectrum-global-color-gray-200));
      border-color: var(--spectrum-actionbutton-m-quiet-border-color-selected-key-focus, var(--spectrum-alias-border-color-transparent));
      color: var(--spectrum-actionbutton-m-quiet-text-color-selected-key-focus, var(--spectrum-alias-text-color-hover));
    }

.spectrum-ActionButton--quiet.is-selected:hover {
      background-color: var(--spectrum-actionbutton-m-quiet-background-color-selected-hover, var(--spectrum-global-color-gray-200));
      border-color: var(--spectrum-actionbutton-m-quiet-border-color-selected-hover, var(--spectrum-alias-border-color-transparent));
      color: var(--spectrum-actionbutton-m-quiet-text-color-selected-hover, var(--spectrum-alias-text-color-hover));
    }

.spectrum-ActionButton--quiet.is-selected:active {
      background-color: var(--spectrum-actionbutton-m-quiet-background-color-selected-down, var(--spectrum-global-color-gray-200));
      border-color: var(--spectrum-actionbutton-m-quiet-border-color-selected-down, var(--spectrum-alias-border-color-transparent));
      color: var(--spectrum-actionbutton-m-quiet-text-color-selected-down, var(--spectrum-alias-text-color-down));
    }

.spectrum-ActionButton--quiet.is-selected:disabled,
    .spectrum-ActionButton--quiet.is-selected.is-disabled {
      background-color: var(--spectrum-actionbutton-m-quiet-background-color-selected-disabled, var(--spectrum-global-color-gray-200));
      border-color: var(--spectrum-actionbutton-m-quiet-border-color-selected-disabled, var(--spectrum-alias-border-color-transparent));
      color: var(--spectrum-actionbutton-m-quiet-text-color-selected-disabled, var(--spectrum-alias-text-color-disabled));
    }