@use "variables" as *;
@use "themes" as *;
@use "scrollbar" as *;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.popup-wrapper {
  width: 400px;
  max-height: 600px;
  overflow-y: auto;
  background: var(--background-primary);
  @include custom-scrollbar;

  .popup-content {
    display: flex;
    flex-direction: column;
    gap: $spacing-md;
    padding: $spacing-md;

    .settings-group {
      display: flex;
      flex-direction: column;
      gap: $spacing-sm;
    }
  }
}

.popup-description {
  color: var(--text-secondary);
  font-size: $font-size-sm;
  line-height: 1.5;
  margin: 0;
}

.settings-group {
  background: var(--background-secondary);
  border-radius: $border-radius-md;
  padding: $spacing-md;
  margin: $spacing-md 0;
  display: flex;
  flex-direction: column;
  gap: $spacing-md;

  &:hover {
    background: var(--background-hover);
  }
}

// Tooltip 样式
[data-radix-tooltip-trigger-container] {
  width: 100%;
}

.TooltipContent {
  max-width: 250px;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-tooltip);
  background-color: var(--background-tooltip);
  box-shadow: var(--shadow-tooltip);
  user-select: none;
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  z-index: 1000;
  border: 1px solid var(--border-color);

  &[data-state="delayed-open"] {
    animation-name: slideUpAndFade;
  }

  .TooltipArrow {
    fill: var(--background-tooltip);
    stroke: var(--border-color);
    stroke-width: 1px;
  }
}

// 动画
@keyframes slideUpAndFade {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
