:host {
  /**
   * @prop --button-text-color: [DEPRECATED] Button text color
   */
  --button-text-color: var(--color-text-inverse);
  /**
   * @prop --button-background-color: [DEPRECATED] Button background color
   */
  --button-background-color: var(--color-background-interactive-default);
  /**
   * @prop --button-border-color: [DEPRECATED] Button border color
   */
  --button-border-color: transparent;
  /**
   * @prop --button-hover-background-color: [DEPRECATED] Button hover background color
   */
  --button-hover-background-color: var(--color-background-interactive-hover);
  /**
   * @prop --button-hover-border-color: [DEPRECATED] Button hover border color
   */
  --button-hover-border-color: transparent;
  /**
   * @prop --button-active-background-color: [DEPRECATED] Button active background color
   */
  --button-active-background-color: var(
      --color-background-interactive-default
  );
  /**
   * @prop --button-active-border-color: [DEPRECATED] Button active border color
   */
  --button-active-border-color: var(--color-background-interactive-default);
  /**
   * @prop --button-secondary-text-color: [DEPRECATED] Button secondary text color
   */
  --button-secondary-text-color: var(--color-background-interactive-default);
  /**
  * @prop --button-secondary-hover-text-color: [DEPRECATED] Secondary button hover text color
  */
  --button-secondary-hover-text-color: var(
      --color-background-interactive-hover
  );
  /**
   * @prop --button-secondary-background-color: [DEPRECATED] Button secondary background color
   */
  --button-secondary-background-color: transparent;
  /**
   * @prop --button-secondary-border-color: [DEPRECATED] Button secondary border color
   */
  --button-secondary-border-color: var(
      --color-background-interactive-default,
      rgb(0, 90, 143)
  );
  /**
   * @prop --button-secondary-hover-background-color: [DEPRECATED]  Button secondary hover background color
   */
  --button-secondary-hover-background-color: transparent;
  /**
   * @prop --button-secondary-hover-border-color: [DEPRECATED]  Button secondary hover border color
   */
  --button-secondary-hover-border-color: var(
      --color-background-interactive-hover
  );
  /**
  * @prop --button-borderless-text-color: [DEPRECATED] Button borderless text color
  */
  --button-borderless-color: var(--color-background-interactive-default);
  /**
  * @prop --button-borderless-hover-color: [DEPRECATED] Borderless buttons hover text color 
  */
  --button-borderless-hover-color: var(--color-background-interactive-hover);
  display: inline-block;
  width: auto;
}

:host([hidden]) {
  display: none;
}

:host([disabled]) {
  pointer-events: none;
}

.rux-button {
  display: flex;
  position: relative;
  margin: 0;
  width: inherit;
  padding: 0 1rem;
  height: 2.125rem;
  min-width: 2.25rem;
  border-radius: var(--radius-base);
  color: var(--button-text-color);
  font-family: var(--font-body-1-font-family);
  font-size: var(--font-body-1-font-size);
  font-weight: var(--font-body-1-font-weight);
  letter-spacing: var(--font-body-1-letter-spacing);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-content: center;
  align-items: center;
  user-select: none;
}
.rux-button rux-icon,
.rux-button ::slotted(rux-icon) {
  height: 1rem;
  width: 1rem;
  margin-right: 0.625rem;
  color: var(--button-text-color);
}
.rux-button:disabled {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}
.rux-button:focus {
  outline: none;
}
.rux-button:hover:not([disabled]) {
  cursor: pointer;
}
.rux-button--default {
  border: 1px solid var(--button-border-color);
  background-color: var(--button-background-color);
}
.rux-button--default:hover:not([disabled]) {
  border-color: var(--button-hover-border-color);
  background-color: var(--button-hover-background-color);
}
.rux-button--default:active:not([disabled]) {
  border-color: var(--button-active-border-color);
  background-color: var(--button-active-background-color);
}
.rux-button--secondary {
  color: var(--button-secondary-text-color);
  background-color: var(--button-secondary-background-color);
  border: 1px solid var(--button-secondary-border-color);
}
.rux-button--secondary:hover:not([disabled]) {
  color: var(--button-secondary-hover-text-color);
  background-color: var(--button-secondary-hover-background-color);
  border-color: var(--button-secondary-hover-border-color);
}
.rux-button--secondary:hover:not([disabled]) rux-icon,
.rux-button--secondary:hover:not([disabled]) ::slotted(rux-icon) {
  color: var(--button-secondary-hover-text-color);
}
.rux-button--secondary:active:not([disabled]) {
  border-color: var(--button-secondary-border-color);
  background-color: var(--button-secondary-background-color);
  color: var(--button-secondary-text-color);
}
.rux-button--secondary:active:not([disabled]) rux-icon,
.rux-button--secondary:active:not([disabled]) ::slotted(rux-icon) {
  color: var(--button-secondary-text-color);
}
.rux-button--secondary rux-icon,
.rux-button--secondary ::slotted(rux-icon) {
  color: var(--button-secondary-text-color);
}
.rux-button--borderless {
  color: var(--button-borderless-color);
  border: none;
  background: none;
}
.rux-button--borderless:hover:not([disabled]) {
  color: var(--button-borderless-hover-color);
  background: none;
}
.rux-button--borderless:hover:not([disabled]) rux-icon,
.rux-button--borderless:hover:not([disabled]) ::slotted(rux-icon) {
  color: var(--button-borderless-hover-color);
}
.rux-button--borderless:active:not([disabled]) {
  color: var(--button-borderless-color);
}
.rux-button--borderless:active:not([disabled]) rux-icon,
.rux-button--borderless:active:not([disabled]) ::slotted(rux-icon) {
  color: var(--button-borderless-color);
}
.rux-button--borderless rux-icon,
.rux-button--borderless ::slotted(rux-icon) {
  color: var(--button-borderless-color);
}
.rux-button--small {
  height: 1.625rem;
  padding: 0 1rem;
  line-height: 1;
}
.rux-button--large {
  height: 2.875rem;
  min-width: 3rem;
  padding: 0 1rem;
}
.rux-button--icon-only {
  font-size: 0;
  width: 3rem;
}

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