:host {
  /* Button */
  /**
   * @prop --buttonTextColor: Button text color
   */
  /**
   * @prop --buttonBackgroundColor: Button background color
   */
  /**
   * @prop --buttonBorderColor: Button border color
   */
  /* Button Hover State */
  /**
   * @prop --buttonHoverTextColor: Button hover text color
   */
  /**
   * @prop --buttonHoverBackgroundColor: Button hover background color
   */
  /**
   * @prop --buttonHoverBorderColor: Button hover border color
   */
  /* Button Active State */
  /**
   * @prop --buttonActiveControlTextColor: Button active text color
   */
  /**
   * @prop --buttonActiveBackgroundColor: Button active background color
   */
  /**
   * @prop --buttonActiveBorderColor: Button active border color
   */
  /**
   * @prop --buttonSecondaryTextColor: Button secondary text color
   */
  /**
   * @prop --buttonSecondaryBackgroundColor: Button secondary background color
   */
  /**
   * @prop --buttonSecondaryBorderColor: Button secondary border color
   */
  /**
   * @prop --buttonSecondaryHoverTextColor: Button secondary hover text color
   */
  /**
   * @prop --buttonSecondaryHoverBackgroundColor:  Button secondary hover background color
   */
  /**
   * @prop --buttonSecondaryHoverBorderColor:  Button secondary hover border color
   */
}

.rux-button {
  display: flex;
  position: relative;
  margin: 0;
  padding: 0 1rem;
  height: 2.125rem;
  min-width: 2.25rem;
  border-radius: var(--buttonBorderRadius);
  color: var(--buttonTextColor);
  font-family: var(--fontFamily);
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-content: center;
  align-items: center;
  user-select: none;
}
.rux-button ::slotted(rux-icon),
.rux-button rux-icon {
  height: 1rem;
  width: 1rem;
  margin-right: 0.625rem;
}
.rux-button:disabled {
  opacity: var(--disabledOpacity);
  cursor: var(--disabledCursor);
}
.rux-button:focus {
  outline: none;
}
.rux-button:hover:not([disabled]) {
  cursor: pointer;
}
.rux-button:active:not([hover]):not([disabled]) {
  border-color: var(--buttonActiveBorderColor) !important;
  background-color: var(--buttonActiveBackgroundColor) !important;
}
.rux-button:hover:not([active]):not([disabled]):not(.rux-button--secondary) {
  border-color: var(--buttonHoverBorderColor);
  background-color: var(--buttonHoverBackgroundColor);
}
.rux-button-group {
  display: flex;
}
.rux-button-group .rux-button:not(:last-child) {
  margin-right: 0.625rem;
}
.rux-button:not(.rux-button--secondary) {
  border: 1px solid var(--buttonBorderColor);
  background-color: var(--buttonBackgroundColor);
}
.rux-button__icon {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 0.625rem;
  margin-left: -0.625rem;
}
.rux-button__icon .rux-icon {
  height: auto;
  width: 100%;
  fill: var(--buttonTextColor);
  color: var(--buttonTextColor);
}
.rux-button--secondary {
  color: var(--buttonSecondaryTextColor);
  background-color: var(--buttonSecondaryBackgroundColor);
  border: 1px solid var(--buttonSecondaryBorderColor);
}
.rux-button--secondary:active:not([hover]):not([disabled]) {
  border-color: var(--buttonSecondaryBorderColor) !important;
  background-color: var(--buttonSecondaryBackgroundColor) !important;
}
.rux-button--secondary:hover:not([disabled]) {
  color: var(--buttonSecondaryTextColor);
  background-color: var(--buttonSecondaryHoverBackgroundColor);
  border-color: var(--buttonSecondaryHoverBorderColor);
}
.rux-button--small {
  height: 1.625rem;
  padding: 0 1rem;
  line-height: 1;
}
.rux-button--small .rux-button--icon-only {
  width: 3rem;
  height: 1.625rem;
}
.rux-button--small.rux-button__icon {
  height: 0.875rem;
  width: 0.875rem;
}
.rux-button--small.rux-button--icon-only {
  min-width: 1.625rem;
  padding: 0 0.75rem;
}
.rux-button--large {
  height: 2.875rem;
  min-width: 3rem;
  padding: 0 1rem;
}
.rux-button--large .rux-button--icon-only {
  width: 3rem;
  height: 2.875rem;
}
.rux-button--large .rux-button__icon {
  height: 1rem;
  width: 1rem;
}
.rux-button--critical, .rux-button--critical:active:not([hover]):not([disabled]):not(.rux-button--secondary) {
  background-color: var(--colorCriticalDarken1) !important;
  border-color: var(--colorCriticalDarken1) !important;
}
.rux-button--critical:hover:not([active]):not([disabled]), .rux-button--critical:active:not([hover]):not([disabled]):not(.rux-button--secondary):hover:not([active]):not([disabled]) {
  background-color: var(--colorCritical);
  border-color: var(--colorCritical);
}
.rux-button--icon-only {
  font-size: 0px;
  width: 3rem;
  hieght: 2.125rem;
}
.rux-button--icon-only .rux-button__icon {
  margin-left: -0.625rem;
  margin-right: -0.625rem;
}

.rux-button--large.rux-button--icon-only .rux-button__icon {
  margin-left: -1rem;
  margin-right: -1rem;
}

.rux-button--icon-only ::slotted(rux-icon),
.rux-button--icon-only rux-icon {
  margin-left: -0.625rem;
  margin-right: -0.625rem;
}

.rux-button--large.rux-button--icon-only ::slotted(rux-icon),
.rux-button--large.rux-button--icon-only rux-icon {
  margin-left: -1rem;
  margin-right: -1rem;
}

.rux-button--small ::slotted(rux-icon),
.rux-button--small rux-icon {
  height: 1rem;
  width: 1rem;
}

.rux-button--large ::slotted(rux-icon),
.rux-button--large rux-icon {
  height: 1rem;
  width: 1rem;
}

.rux-button rux-icon {
  fill: var(--buttonTextColor);
}

.rux-button--secondary rux-icon,
.rux-button--secondary rux-icon svg > use {
  fill: var(--buttonSecondaryTextColor);
}

.rux-button ::slotted(rux-icon) {
  fill: var(--buttonTextColor);
}

.rux-button--secondary ::slotted(rux-icon) {
  fill: var(--buttonSecondaryTextColor);
}