:host {
  display: inline-block;
  vertical-align: top;
}

:host([size=s]) {
  --r-icon--width: 16px;
  --r-icon--height: 16px;
  line-height: 16px;
}

:host([size=m]) {
  --r-icon--width: 24px;
  --r-icon--height: 24px;
  line-height: 24px;
}

:host([size=l]) {
  --r-icon--width: 32px;
  --r-icon--height: 32px;
  line-height: 32px;
}

:host([size]) {
  --r-icon--slotted--width: var(--r-icon--width, 24px);
  --r-icon--slotted--height: var(--r-icon--height, 24px);
}

:host([variant=button]) {
  --r-icon--target-area--display: block;
  --r-icon--button-area--display: block;
}

:host([variant=button]:hover) {
  --r-icon--button-area--border-color: var(--r-border-softer);
  --r-icon--button-area--background-color: var(--r-background-interactive-hovered);
}

:host([variant=button][size=m]) {
  --r-icon--button-area--width: 2.25rem;
  --r-icon--button-area--height: 2.25rem;
  --r-icon--button-area--top: calc(50% - 1.125rem)
  --r-icon--button-area--left: calc(50% - 1.125rem) ;
}

:host([variant=button][size=l]) {
  --r-icon--button-area--width: 2.75rem;
  --r-icon--button-area--height: 2.75rem;
  --r-icon--button-area--top: calc(50% - 1.375rem)
  --r-icon--button-area--left: calc(50% - 1.375rem) ;
}

.r-icon {
  display: var(--r-icon--display, block);
  width: var(--r-icon--width, 24px);
  height: var(--r-icon--height, 24px);
  margin-left: var(--r-icon--margin-left, 0);
  margin-right: var(--r-icon--margin-right, 0);
  overflow: var(--r-icon--overflow, hidden);
  color: var(--r-icon--color, inherit);
}
.r-icon--container {
  display: var(--r-icon--container--display, flex);
  align-items: var(--r-icon--container--align-items, center);
  justify-content: var(--r-icon--container--justify-content, center);
  fill: var(--r-icon--container--fill, rgba(0, 0, 0, 0));
  stroke: var(--r-icon--container--stroke, inherit);
  stroke-width: var(--r-icon--container--stroke-width, 1.5);
  width: var(--r-icon--container--width, inherit);
  height: var(--r-icon--container--height, inherit);
}
.r-icon ::slotted(svg) {
  width: var(--r-icon--slotted--width, 100%);
  height: var(--r-icon--slotted--height, auto);
  vertical-align: var(--r-icon--slotted--vertical-align, top);
  color: var(--r-icon--slotted--color, inherit);
  stroke-width: var(--r-icon--slotted--stroke-width, 1.5);
  fill: var(--r-icon--slotted--fill, transparent);
}
.r-icon--button-area {
  position: var(--r-icon--button-area--position, absolute);
  left: var(--r-icon--button-area--left, calc(50% - 0.75rem));
  top: var(--r-icon--button-area--top, calc(50% - 0.75rem));
  display: var(--r-icon--button-area--display, none);
  width: var(--r-icon--button-area--width, 1.5rem);
  height: var(--r-icon--button-area--height, 1.5rem);
  background-color: var(--r-icon--button-area--background-color, transparent);
  border-width: var(--r-icon--button-area--border-width, 1px);
  border-style: var(--r-icon--button-area--border-style, solid);
  border-color: var(--r-icon--button-area--border-color, transparent);
  border-radius: var(--r-icon--button-area--border-radius, 50%);
  box-sizing: var(--r-icon--button-area--box-sizing, border-box);
  outline: var(--r-icon--button-area--outline, none);
  outline-offset: var(--r-icon--button-area--outline-offset, 0);
  box-shadow: var(--r-icon--button-area--box-shadow, 0);
}
.r-icon--target-area {
  position: var(--r-icon--target-area--position, absolute);
  left: var(--r-icon--target-area--left, calc(50% - 1.375rem));
  top: var(--r-icon--target-area--top, calc(50% - 1.375rem));
  display: var(--r-icon--target-area--display, none);
  width: var(--r-icon--target-area--width, 2.75rem);
  height: var(--r-icon--target-area--height, 2.75rem);
  background-color: var(--r-icon--target-area--background-color, transparent);
}