.container {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;

  @include transition(background-color, opacity, color);

  &:hover:not(:disabled) {
    background-color: var(--color-grey-light);
  }

  &:active:not(:disabled) {
    background-color: var(--color-grey-light);
    opacity: 0.8;
  }

  &:focus-visible {
    outline: 2px solid var(--color-primary-base);
    outline-offset: 2px;
  }
}

// Size variants
.large {
  width: 38px;
  height: 38px;
  border-radius: map.get($radius, 'md');
}

.medium {
  width: 32px;
  height: 32px;
  border-radius: map.get($radius, 'sm');
}

.small {
  width: 24px;
  height: 24px;
  border-radius: map.get($radius, 'sm');
}

// Type variants
.tertiary {
  // Default - no border (transparent)
}

.outlined {
  border: 1px solid var(--color-grey-neutral);
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;

  &:hover {
    background-color: transparent;
  }
}

.iconWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;

  svg {
    width: 100%;
    height: 100%;
  }
}

// Rendered via React portal on document.body — escapes overflow:hidden containers
.tooltip {
  position: fixed;
  transform: translateX(-50%);
  background: rgba(17, 17, 27, 0.92);
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 100000;
}