.platform-icon-button {
  --platform-icon-button-size: 28px;
  --platform-icon-button-icon-size: 14px;
  position: relative;
  box-sizing: border-box;
  width: var(--platform-icon-button-size);
  height: var(--platform-icon-button-size);
  min-width: var(--platform-icon-button-size);
  min-height: var(--platform-icon-button-size);
  display: inline-flex;
  flex: 0 0 var(--platform-icon-button-size);
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  outline: none;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.7) !important;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    color 120ms ease,
    opacity 120ms ease;
}

.platform-icon-button > svg {
  width: var(--platform-icon-button-icon-size);
  height: var(--platform-icon-button-icon-size);
  flex: 0 0 var(--platform-icon-button-icon-size);
}

.platform-icon-button:hover:not(:disabled),
.platform-icon-button:focus-visible,
.platform-icon-button.is-active {
  background: rgba(255, 255, 255, 0.075) !important;
  color: #fff !important;
}

.platform-icon-button:focus-visible {
  box-shadow: 0 0 0 2px #000, 0 0 0 3px rgba(77, 163, 255, 0.72);
}

.platform-icon-button:disabled,
.platform-icon-button[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}

.platform-icon-button.is-size-compact {
  --platform-icon-button-size: 24px;
  --platform-icon-button-icon-size: 13px;
}

.platform-icon-button.is-size-medium {
  --platform-icon-button-size: 32px;
  --platform-icon-button-icon-size: 16px;
}

.platform-icon-button__tooltip {
  position: absolute;
  z-index: 200;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: #363636;
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 120ms ease,
    transform 120ms ease,
    visibility 0s linear 120ms;
}

.platform-icon-button__tooltip-label,
.platform-icon-button__tooltip-shortcut {
  display: block;
  flex: 0 0 auto;
  white-space: nowrap;
}

.platform-icon-button__tooltip-shortcut {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.platform-icon-button[data-platform-icon-button-tooltip-placement="top"] > .platform-icon-button__tooltip,
.platform-icon-button[data-platform-icon-button-tooltip-placement="bottom"] > .platform-icon-button__tooltip {
  left: 50%;
  transform: translateX(-50%) translateY(var(--platform-icon-button-tooltip-shift));
}

.platform-icon-button[data-platform-icon-button-tooltip-placement="top"] > .platform-icon-button__tooltip {
  --platform-icon-button-tooltip-shift: 2px;
  right: auto;
  bottom: calc(100% + var(--platform-icon-button-tooltip-offset, 8px));
}

.platform-icon-button[data-platform-icon-button-tooltip-placement="bottom"] > .platform-icon-button__tooltip {
  --platform-icon-button-tooltip-shift: -2px;
  right: auto;
  top: calc(100% + var(--platform-icon-button-tooltip-offset, 8px));
}

.platform-icon-button[data-platform-icon-button-tooltip-placement="top"][data-platform-icon-button-tooltip-align="start"] > .platform-icon-button__tooltip,
.platform-icon-button[data-platform-icon-button-tooltip-placement="bottom"][data-platform-icon-button-tooltip-align="start"] > .platform-icon-button__tooltip {
  right: auto;
  left: 0;
  transform: translateY(var(--platform-icon-button-tooltip-shift));
}

.platform-icon-button[data-platform-icon-button-tooltip-placement="top"][data-platform-icon-button-tooltip-align="end"] > .platform-icon-button__tooltip,
.platform-icon-button[data-platform-icon-button-tooltip-placement="bottom"][data-platform-icon-button-tooltip-align="end"] > .platform-icon-button__tooltip {
  right: 0;
  left: auto;
  transform: translateY(var(--platform-icon-button-tooltip-shift));
}

.platform-icon-button[data-platform-icon-button-tooltip-placement="left"] > .platform-icon-button__tooltip,
.platform-icon-button[data-platform-icon-button-tooltip-placement="right"] > .platform-icon-button__tooltip {
  top: 50%;
  transform: translateX(var(--platform-icon-button-tooltip-shift)) translateY(-50%);
}

.platform-icon-button[data-platform-icon-button-tooltip-placement="left"] > .platform-icon-button__tooltip {
  --platform-icon-button-tooltip-shift: 2px;
  right: calc(100% + var(--platform-icon-button-tooltip-offset, 8px));
  left: auto;
}

.platform-icon-button[data-platform-icon-button-tooltip-placement="right"] > .platform-icon-button__tooltip {
  --platform-icon-button-tooltip-shift: -2px;
  right: auto;
  left: calc(100% + var(--platform-icon-button-tooltip-offset, 8px));
}

.platform-icon-button[data-platform-icon-button-tooltip-placement="left"][data-platform-icon-button-tooltip-align="start"] > .platform-icon-button__tooltip,
.platform-icon-button[data-platform-icon-button-tooltip-placement="right"][data-platform-icon-button-tooltip-align="start"] > .platform-icon-button__tooltip {
  top: 0;
  transform: translateX(var(--platform-icon-button-tooltip-shift));
}

.platform-icon-button[data-platform-icon-button-tooltip-placement="left"][data-platform-icon-button-tooltip-align="end"] > .platform-icon-button__tooltip,
.platform-icon-button[data-platform-icon-button-tooltip-placement="right"][data-platform-icon-button-tooltip-align="end"] > .platform-icon-button__tooltip {
  top: auto;
  bottom: 0;
  transform: translateX(var(--platform-icon-button-tooltip-shift));
}

.platform-icon-button[data-platform-icon-button-tooltip]:hover:not(:disabled) > .platform-icon-button__tooltip,
.platform-icon-button[data-platform-icon-button-tooltip]:focus-visible > .platform-icon-button__tooltip {
  --platform-icon-button-tooltip-shift: 0px;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* The same tooltip surface is also used by non-icon controls such as the
   composer selectors. Keep this primitive aligned with icon-button tooltips
   while allowing a single semantic wrapper around an existing button. */
.platform-hover-label {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 0;
  vertical-align: middle;
}

.platform-hover-label[data-platform-hover-label-placement="top"] > .platform-icon-button__tooltip,
.platform-hover-label[data-platform-hover-label-placement="bottom"] > .platform-icon-button__tooltip {
  left: 50%;
  transform: translateX(-50%) translateY(var(--platform-icon-button-tooltip-shift));
}

.platform-hover-label[data-platform-hover-label-placement="top"] > .platform-icon-button__tooltip {
  --platform-icon-button-tooltip-shift: 2px;
  right: auto;
  bottom: calc(100% + var(--platform-icon-button-tooltip-offset, 8px));
}

.platform-hover-label[data-platform-hover-label-placement="bottom"] > .platform-icon-button__tooltip {
  --platform-icon-button-tooltip-shift: -2px;
  right: auto;
  top: calc(100% + var(--platform-icon-button-tooltip-offset, 8px));
}

.platform-hover-label[data-platform-hover-label-placement="top"][data-platform-hover-label-align="start"] > .platform-icon-button__tooltip,
.platform-hover-label[data-platform-hover-label-placement="bottom"][data-platform-hover-label-align="start"] > .platform-icon-button__tooltip {
  right: auto;
  left: 0;
  transform: translateY(var(--platform-icon-button-tooltip-shift));
}

.platform-hover-label[data-platform-hover-label-placement="top"][data-platform-hover-label-align="end"] > .platform-icon-button__tooltip,
.platform-hover-label[data-platform-hover-label-placement="bottom"][data-platform-hover-label-align="end"] > .platform-icon-button__tooltip {
  right: 0;
  left: auto;
  transform: translateY(var(--platform-icon-button-tooltip-shift));
}

.platform-hover-label[data-platform-hover-label-placement="left"] > .platform-icon-button__tooltip,
.platform-hover-label[data-platform-hover-label-placement="right"] > .platform-icon-button__tooltip {
  top: 50%;
  transform: translateX(var(--platform-icon-button-tooltip-shift)) translateY(-50%);
}

.platform-hover-label[data-platform-hover-label-placement="left"] > .platform-icon-button__tooltip {
  --platform-icon-button-tooltip-shift: 2px;
  right: calc(100% + var(--platform-icon-button-tooltip-offset, 8px));
  left: auto;
}

.platform-hover-label[data-platform-hover-label-placement="right"] > .platform-icon-button__tooltip {
  --platform-icon-button-tooltip-shift: -2px;
  right: auto;
  left: calc(100% + var(--platform-icon-button-tooltip-offset, 8px));
}

.platform-hover-label[data-platform-hover-label-placement="left"][data-platform-hover-label-align="start"] > .platform-icon-button__tooltip,
.platform-hover-label[data-platform-hover-label-placement="right"][data-platform-hover-label-align="start"] > .platform-icon-button__tooltip {
  top: 0;
  transform: translateX(var(--platform-icon-button-tooltip-shift));
}

.platform-hover-label[data-platform-hover-label-placement="left"][data-platform-hover-label-align="end"] > .platform-icon-button__tooltip,
.platform-hover-label[data-platform-hover-label-placement="right"][data-platform-hover-label-align="end"] > .platform-icon-button__tooltip {
  top: auto;
  bottom: 0;
  transform: translateX(var(--platform-icon-button-tooltip-shift));
}

.platform-hover-label[data-platform-hover-label]:hover > .platform-icon-button__tooltip,
.platform-hover-label[data-platform-hover-label]:focus-within > .platform-icon-button__tooltip {
  --platform-icon-button-tooltip-shift: 0px;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .platform-icon-button,
  .platform-icon-button__tooltip {
    transition-duration: 1ms;
  }
}