:host {
  display: inline-flex;
  vertical-align: top;
  --r-icon-button--color: inherit;
}

:host(:hover:not([disabled]:not([disabled=false])):not(:active)) {
  --r-icon-button--background-color: var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));
}

:host(:active:not([disabled]:not([disabled=false]))) {
  --r-icon-button--background-color: var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12));
}

:host(:focus-within:not(:active):not([disabled]:not([disabled=false]))) {
  box-shadow: 0 0 0 6px var(--r-border-focused-outlined, #fff);
  outline: 2px solid var(--r-border-focused, #0071e3);
  outline-offset: 2px;
}

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

:host([variant=contained]) {
  --r-icon-button--color: var(--r-icon-inverse, #fff);
  --r-icon-button--background-color: var(--r-background-interactive-regular, #282828);
  --r-icon-button--box-shadow: none;
}

:host([variant=contained]:hover:not([disabled]:not([disabled=false]))) {
  --r-icon-button--color: var(--r-icon-regular, #282828);
  --r-icon-button--background-color: var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));
}

:host([variant=contained]:active:not([disabled]:not([disabled=false]))) {
  --r-icon-button--color: var(--r-icon-regular, #282828);
  --r-icon-button--background-color: var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12));
}

:host([variant=contained][disabled]:not([disabled=false])) {
  --r-icon-button--color: var(--r-icon-inverse, #fff);
  --r-icon-button--background-color: var(--r-background-interactive-regular, #282828);
}

:host([size=s]) {
  --r-icon-button--height: 1.5rem;
  --r-icon-button--width: 1.5rem;
}

:host([size=m]) {
  --r-icon-button--height: 2.25rem;
  --r-icon-button--width: 2.25rem;
}

:host([size=l]) {
  --r-icon-button--height: 2.75rem;
  --r-icon-button--width: 2.75rem;
}

.r-icon-button {
  display: var(--r-icon-button--display, inline-flex);
  align-items: var(--r-icon-button--align-items, center);
  justify-content: var(--r-icon-button--justify-content, center);
  outline: var(--r-icon-button--outline, none);
  cursor: var(--r-icon-button--cursor, pointer);
  pointer-events: var(--r-icon-button--pointer-events, initial);
  padding: var(--r-icon-button--padding, 0);
  border: var(--r-icon-button--border, none);
  color: var(--r-icon-button--color, inherit);
  background-color: var(--r-icon-button--background-color, transparent);
  box-sizing: var(--r-icon-button--box-sizing, border-box);
  border-width: var(--r-icon-button--border-width, 1px);
  border-style: var(--r-icon-button--border-style, solid);
  border-color: var(--r-icon-button--border-color, transparent);
  border-radius: var(--r-icon-button--border-radius, 50%);
  z-index: var(--r-icon-button--z-index, initial);
  width: var(--r-icon-button--width, 2.25rem);
  height: var(--r-icon-button--height, 2.25rem);
}
.r-icon-button--target-area {
  position: var(--r-icon-button--target-area--position, absolute);
  background: var(--r-icon-button--target-area--background, rgba(0, 0, 0, 0));
  width: var(--r-icon-button--target-area--width, 2.75rem);
  height: var(--r-icon-button--target-area--height, 2.75rem);
  z-index: var(--r-icon-button--target-area--z-index, 1);
}
.r-icon-button--icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}