.icon,
.dockerButton,
.closeButton,
.backButton {
  box-sizing: border-box;
  padding: calc(var(--icon-size, 24px) * (1/4));
  text-align: center;
  border-radius: var(--layout-radius);
}

.backButton {
  box-sizing: content-box;
  height: var(--icon-size, 24px);
  border: 2px solid transparent;
  display: flex;
  align-items: center;
}

.closeButton,
.backButton {
  margin-inline-start: auto;
}

.icon svg,
.dockerButton svg,
.closeButton svg,
.backButton svg {
  fill: var(--theme-text);
  width: var(--icon-size, 24px);
  height: var(--icon-size, 24px);
}

.icon[data-hovered],
.dockerButton[data-hovered],
.closeButton[data-hovered],
.backButton[data-hovered] {
  background-color: var(--theme-hover);
}

.icon[data-focus-visible],
.dockerButton[data-focus-visible],
.closeButton[data-focus-visible],
.backButton[data-focus-visible] {
  outline: 2px solid var(--theme-focus);
}

.backButton[data-disabled] {
  color: var(--theme-disable)
}

.icon[data-disabled] svg,
.dockerButton[data-disabled] svg,
.closeButton[data-disabled] svg,
.backButton[data-disabled] svg {
  fill: var(--theme-disable);
}

.tooltip {
  background-color: var(--theme-text);
  color: var(--theme-background);
  padding: 5px;
  border-radius: var(--layout-radius);
}

/* Visibility + Immersive */

.alwaysVisible {
  opacity: 1;
}

:global(.stacked-ui.isImmersive:not(.isHovering)) .partiallyVisible {
  opacity: 0;
}

/* Utils to improve icons’ consistency */

.iconCompSm {
  padding: calc(var(--icon-size, 24px) * (1/3));
}

.iconCompSm svg {
  width: calc(var(--icon-size, 24px) * (3/4));
  height: calc(var(--icon-size, 24px) * (3/4));
  stroke: var(--theme-text);
}

.iconCompLg {
  padding: calc(var(--icon-size, 24px) * (1/6));
}

.iconCompLg svg {
  width: calc(var(--icon-size, 24px) * (4/3));
  height: calc(var(--icon-size, 24px) * (4/3));
}

.iconApplyStroke svg {
  stroke: var(--theme-text);
}