:host {
  display: inline-flex;
  vertical-align: top;
  opacity: 1;
  outline: none;
}

:host(:focus-within:not(:active)) {
  --r-button--box-shadow:
    0 0 0 1px var(--r-border-focused-outlined, #fff),
    0 0 0 3px var(--r-border-focused),
    0 0 0 4px var(--r-border-focused-outlined, #fff);
  --r-button--outline: 2px solid var(--r-border-focused);
  --r-button--outline-offset: 2px;
}

:host(:hover:not(:active):not([disabled]:not([disabled=false]))) {
  --r-button--border-color: var(--r-border-soft, #686868);
  --r-button--color: var(--r-text-regular, #282828);
  --r-button--background-color: var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));
}

:host([disabled]:not([disabled=false])) {
  --r-button--opacity: 0.4;
  --r-button--cursor: not-allowed;
  --r-button--box-shadow: none;
}

:host([size=small]) {
  --r-button--font-size: var(--r-font-size-300, 0.875rem);
  --r-button--padding: 0.642em 0.857em;
  --r-button--height: 2.75rem;
}

:host([icon-position=end]) {
  --r-button--slot--flex-direction: row-reverse;
}

:host([data-icon-only=start]) {
  --r-button--padding: 0.875em;
}

:host([variant=secondary]) {
  --r-button--color: var(--r-text-regular, #282828);
  --r-button--border-color: var(--r-border-regular, #282828);
  --r-button--background-color: rgba(0,0,0,0);
}

:host([variant=secondary]:not([disabled]:not([disabled=false])):hover) {
  --r-button--background-color: var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));
  --r-button--border-color: var(--r-border-soft, #686868);
}

:host([variant=secondary] .r-button:not([aria-disabled=true]):active) {
  --r-button--color: var(--r-text-regular, #282828);
  --r-button--border-color: var(--r-border-soft, #686868);
  --r-button--background-color: var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12));
}

:host([variant=text]) {
  --r-button--color: var(--r-text-regular, #282828);
  --r-button--border-color: rgba(0,0,0,0);
  --r-button--background-color: rgba(0,0,0,0);
  --r-button--slot--position: relative;
  --r-button--slot--text-decoration: underline;
}

:host([variant=text]:hover:not([disabled]:not([disabled=false]))) {
  --r-button--border-color: var(--r-border-soft, #686868);
  --r-button--background-color: var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));
}

:host([variant=text] .r-button:not([aria-disabled=true]):active) {
  --r-button--background-color: var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12));
  --r-button--border-color: var(--r-border-soft, #686868);
}

:host([variant=text][text-position=left]) {
  --r-button--padding: 0.875em var(--spacing-175, 1.75rem) 0.875em 0;
}

:host([variant=text][text-position=right]) {
  --r-button--padding: 0.875em 0 0.875em var(--spacing-175, 1.75rem);
}

:host([variant=text-inline]) {
  --r-button--color: var(--r-text-regular, #282828);
  --r-button--border-color: transparent;
  --r-button--background-color: transparent;
  --r-button--padding: 0 0 0.5rem 0;
  --r-button--height: auto;
  --r-button--slot--text-decoration: underline;
}

:host([variant=text-inline]:hover:not([disabled]:not([disabled=false]))) {
  --r-button--slot--text-decoration: none;
  --r-button--border-color: transparent;
  --r-button--background-color: transparent;
}

:host([variant=text-inline]:active:not([disabled]:not([disabled=false]))) {
  --r-button--border-color: transparent;
  --r-button--background-color: transparent;
}

:host([variant=blank]) {
  --r-button--color: var(--r-text-regular, #282828);
  --r-button--border-color: rgba(0,0,0,0);
  --r-button--background-color: rgba(0,0,0,0);
  --r-button--border-width: 0;
  --r-button--padding: 0;
}

:host([variant=blank]) .r-button:active {
  --r-button--border-width: 0;
  --r-button--background-color: rgba(0,0,0,0);
}

:host([variant=blank]:hover:not([disabled]:not([disabled=false]))) {
  --r-button--color: var(--r-text-regular, #282828);
}

:host([expanded]),
:host([full-width]:not([full-width=false])) {
  display: block;
  --r-button--display: flex;
  --r-button--width: 100%;
}

.r-button {
  display: var(--r-button--display, inline-flex);
  align-items: var(--r-button--align-items, center);
  justify-content: var(--r-button--justify-content, center);
  width: var(--r-button--width, auto);
  height: var(--r-button--height, 3rem);
  position: var(--r-button--position, static);
  top: var(--r-button--top, auto);
  left: var(--r-button--left, auto);
  box-sizing: var(--r-button--box-sizing, border-box);
  outline: var(--r-button--outline, none);
  outline-offset: var(--r-button--outline-offset, 0);
  cursor: var(--r-button--cursor, pointer);
  font-family: var(--r-button--font-family, var(--r-font-family-text, system-ui));
  font-weight: var(--r-button--font-weight, 400);
  text-align: var(--r-button--text-align, center);
  text-transform: var(--r-button--text-transform, uppercase);
  text-decoration: var(--r-button--text-decoration, none);
  background-color: var(--r-button--background-color, var(--r-background-interactive-regular, #282828));
  border-width: var(--r-button--border-width, 1px);
  border-style: var(--r-button--border-style, solid);
  border-color: var(--r-button--border-color, var(--r-border-strong, #000));
  color: var(--r-button--color, var(--r-text-inverse, #fff));
  font-size: var(--r-button--font-size, var(--r-font-size-400, 1rem));
  line-height: var(--r-button--line-height, 1);
  letter-spacing: var(--r-button--letter-spacing, 0.04em);
  padding: var(--r-button--padding, 0.875em var(--r-spacing-175, 1.75rem));
  box-shadow: var(--r-button--box-shadow, none);
  pointer-events: var(--r-button--pointer-events, auto);
  z-index: var(--r-button--z-index, initial);
  vertical-align: var(--r-button--vertical-align, top);
  opacity: var(--r-button--opacity, 1);
}
.r-button:not([aria-disabled=true]):active {
  --r-button--color: var(--r-button--color--active, var(--r-text-regular, #282828));
  --r-button--background-color: var(--r-button--background-color--active, var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12)));
  --r-button--border-color: var(--r-button--border-color--active, var(--r-border-soft, #686868));
}
.r-button--slot {
  position: var(--r-button--slot--position, relative);
  display: var(--r-button--slot--display, flex);
  flex: var(--r-button--slot--flex, 1);
  flex-direction: var(--r-button--slot--flex-direction, row);
  align-items: var(--r-button--slot--align-items, center);
  justify-content: var(--r-button--slot--justify-content, center);
  gap: var(--r-button--gap, 0.5em);
  font-weight: var(--r-button--slot--font-weight, var(--r-font-weight-regular, 400));
  text-decoration: var(--r-button--slot--text-decoration, none);
  text-decoration-color: var(--r-button--slot--text-decoration-color, var(--r-button-color, inherit));
  text-underline-offset: var(--r-button--slot--text-underline-offset, 0.5rem);
}