:root{
  --bp-rounded: 8px;
}

/**
 * Winden Breakpoint Indicator Styles
 *
 * Fixed position pill in bottom-right corner
 * Uses Winden design tokens for consistency
 */

.winden-breakpoint-indicator {
  /* Positioning */
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 999999;

  display: flex;
  align-items: center;

  /* Container */
  background: hsl(224deg 71.43% 4.12%);
  color: white;
  border-radius: 8px 0 0 0;
  padding: 8px;

  /* Typography */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;

  /* Animation */
  transition: all 0.2s ease-in-out;

  /* Prevent selection */
  user-select: none;
  -webkit-user-select: none;
}

/* Content wrapper */
.winden-breakpoint-content {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 1px;
  border-radius: var(--bp-rounded);
  overflow: hidden;
}

/* Breakpoint select dropdown */
.winden-breakpoint-select {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border-radius: var(--bp-rounded);
  padding: 4px 24px 4px 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 9L2 5h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px;
}

.winden-breakpoint-select:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.winden-breakpoint-select:focus {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Select dropdown options */
.winden-breakpoint-select option {
  background: hsl(224deg 71.43% 4.12%);
  color: white;
  padding: 4px 8px;
}

/* Screen width */
.winden-breakpoint-width {
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  margin-left: 10px;
}

/* Breakpoint buttons (preview mode) */
.winden-breakpoint-button {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  padding: 6px 12px;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
}

.winden-breakpoint-button:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.winden-breakpoint-button.active {
  background: #8935f6;
}

/* Exit button styling */
.winden-breakpoint-button.winden-breakpoint-exit {
  background: hsl(0deg 71% 51%);
  border-color: hsl(0deg 71% 41%);
  margin-left: 6px;
  border-radius: var(--bp-rounded);
}

.winden-breakpoint-button.winden-breakpoint-exit:hover {
  background: hsl(0deg 71% 61%);
  border-color: hsl(0deg 71% 51%);
}

/* Below-breakpoint state */
.winden-breakpoint-indicator.is-below {
  background: hsl(0deg 71% 51%); /* Reddish tone */
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .winden-breakpoint-indicator {
    bottom: 0px;
    right: 0px;
    padding: 2px;
    font-size: 12px;
  }

  .winden-breakpoint-name {
    font-size: 13px;
  }

  .winden-breakpoint-button {
    padding: 4px 8px;
    font-size: 11px;
    margin-right: 4px;
  }
}

/* Dark mode support (if needed in future) */
@media (prefers-color-scheme: dark) {
  /* Already dark by default, but can be customized */
}