.button.button-icon {
  --button-pad: 0px;
  position: relative;
  width: var(--button-height);
}

.button.button-icon svg { position: relative; }

.button.button-icon[data-shape="round"] { --button-radius: var(--radius-max); }

.button.button-icon[data-size="xsmall"] { --button-icon: var(--icon-medium); }

.button.button-icon[data-type="negative"] { --tone-outline-hover: transparent; }

.button.button-icon[data-size="xsmall"][data-hierarchy="tertiary"]:not([data-type]) { --button-ink: var(--content-secondary); }

.button.button-icon[data-shape="round"][data-hierarchy="secondary"]:not([data-type])[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  inset: calc(3px - var(--stroke-xsmall));
  border: var(--stroke-xsmall) solid var(--border-extension-accent-transparent);
  border-radius: var(--radius-max);
  background: var(--background-extension-accent);
}

@media (hover: hover) {
  .button.button-icon[data-size="xsmall"][data-hierarchy="tertiary"]:not([data-type]):hover { --button-ink: var(--content-primary); }
}