/* ============================================================
   ToolbarX — Styles
   Configurable toolbar with inner track, sliding pill & golden glow
   Supports horizontal & vertical orientation
   ============================================================ */

@property --toolbar-x-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@property --toolbar-x-angle2 {
  syntax: '<angle>';
  initial-value: 120deg;
  inherits: false;
}

@keyframes toolbar-x-rotate-glow {
  from {
    --toolbar-x-angle: 0deg;
  }

  to {
    --toolbar-x-angle: 360deg;
  }
}

@keyframes toolbar-x-rotate-glow2 {
  from {
    --toolbar-x-angle2: 120deg;
  }

  to {
    --toolbar-x-angle2: 480deg;
  }
}

@keyframes toolbar-x-pulse {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.85;
  }
}

.toolbar-x {
  display: inline-flex;
  align-items: center;
  padding: var(--tx-outer-padding, 10px);
  border-radius: var(--tx-outer-radius, 28px);
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    flex-direction 0.3s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  gap: var(--tx-section-gap, 10px);
}

.toolbar-x.horizontal {
  flex-direction: row;
}

.toolbar-x.vertical {
  flex-direction: column;
}

.toolbar-x.dark {
  background: #1c1c22;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  border: 1px solid #2a2a32;
}

.toolbar-x.dark .toolbar-x-track {
  background: #111116;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  border: 1px solid #222228;
}

.toolbar-x.dark .toolbar-x-item {
  color: rgba(255, 255, 255, 0.35);
}

.toolbar-x.dark .toolbar-x-item:hover:not(.active) {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.toolbar-x.dark .toolbar-x-item.active {
  color: #ffffff;
}

.toolbar-x.dark .toolbar-x-pill-inner {
  background: #1e1e24;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5);
}

.toolbar-x.dark .toolbar-x-pill-ring {
  background: #111116;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

.toolbar-x.dark .toolbar-x-pill-halo {
  opacity: 0.9;
}

.toolbar-x.dark .toolbar-x-divider {
  background: rgba(255, 255, 255, 0.05);
}

.toolbar-x.dark .toolbar-x-toggle {
  color: rgba(255, 255, 255, 0.35);
  background: #222228;
}

.toolbar-x.dark .toolbar-x-toggle:hover {
  color: #ffffff;
  background: #2e2e36;
}

.toolbar-x.light {
  background: #e8e8ee;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  border: 1px solid #d0d0d8;
}

.toolbar-x.light .toolbar-x-track {
  background: #f5f5fa;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.06),
    inset 0 0 0 1px rgba(0, 0, 0, 0.03);
  border: 1px solid #dddde4;
}

.toolbar-x.light .toolbar-x-item {
  color: rgba(0, 0, 0, 0.28);
}

.toolbar-x.light .toolbar-x-item:hover:not(.active) {
  color: #1a1a1e;
  background: rgba(0, 0, 0, 0.04);
}

.toolbar-x.light .toolbar-x-item.active {
  color: #1a1a1e;
}

.toolbar-x.light .toolbar-x-pill-inner {
  background: #ffffff;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.toolbar-x.light .toolbar-x-pill-ring {
  background: #f5f5fa;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08);
}

.toolbar-x.light .toolbar-x-pill-halo {
  opacity: 0.6;
}

.toolbar-x.light .toolbar-x-divider {
  background: rgba(0, 0, 0, 0.06);
}

.toolbar-x.light .toolbar-x-toggle {
  color: rgba(0, 0, 0, 0.28);
  background: #dddde4;
}

.toolbar-x.light .toolbar-x-toggle:hover {
  color: #1a1a1e;
  background: #d0d0d8;
}

.toolbar-x-track {
  display: flex;
  align-items: center;
  position: relative;
  border-radius: var(--tx-inner-radius, 20px);
  padding: var(--tx-inner-padding, 6px);
  transition: background 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
  overflow: visible;
}

.toolbar-x.horizontal .toolbar-x-track {
  flex-direction: row;
}

.toolbar-x.vertical .toolbar-x-track {
  flex-direction: column;
}

.toolbar-x-item {
  position: relative;
  width: var(--tx-item-size, 72px);
  height: var(--tx-item-size, 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tx-item-radius, 18px);
  cursor: pointer;
  transition: color 0.45s ease, background 0.25s ease, transform 0.2s ease;
  z-index: 3;
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  flex-shrink: 0;
}

.toolbar-x-item:hover:not(.active) {
  transform: scale(1.05);
}

.toolbar-x-item:active:not(.active) {
  transform: scale(0.95);
}

.toolbar-x-item .tx-icon {
  width: var(--tx-icon-size, 30px);
  height: var(--tx-icon-size, 30px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  position: relative;
  z-index: 4;
}

.toolbar-x-item .tx-icon svg {
  width: 100%;
  height: 100%;
}

.toolbar-x-divider {
  flex-shrink: 0;
  transition: opacity 0.3s ease, background 0.45s ease;
}

.toolbar-x.horizontal .toolbar-x-divider {
  width: 1px;
  height: 32px;
}

.toolbar-x.vertical .toolbar-x-divider {
  width: 32px;
  height: 1px;
}

.toolbar-x-pill-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

.toolbar-x-pill {
  position: absolute;
  width: var(--tx-item-size, 72px);
  height: var(--tx-item-size, 72px);
  transition: left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    width 0.5s ease,
    height 0.5s ease;
  pointer-events: none;
  z-index: 2;
}

.toolbar-x.horizontal .toolbar-x-pill {
  top: 50%;
  transform: translateY(-50%);
}

.toolbar-x.vertical .toolbar-x-pill {
  left: 50%;
  transform: translateX(-50%);
}

.toolbar-x-pill-halo {
  position: absolute;
  inset: calc((var(--tx-glow-spread, 5px) + 5px) * -1);
  border-radius: calc(var(--tx-item-radius, 18px) + var(--tx-glow-spread, 5px) + 5px);
  background: conic-gradient(from var(--toolbar-x-angle2),
      rgba(255, 215, 0, 0.12),
      rgba(218, 165, 32, 0.22),
      rgba(255, 215, 0, 0.08),
      rgba(205, 133, 63, 0.18),
      rgba(255, 215, 0, 0.12));
  animation: toolbar-x-rotate-glow2 4s linear infinite,
    toolbar-x-pulse 3s ease-in-out infinite;
  filter: blur(6px);
  z-index: 1;
}

.toolbar-x-pill-ring {
  position: absolute;
  inset: calc((var(--tx-glow-spread, 5px) + 2px) * -1);
  border-radius: calc(var(--tx-item-radius, 18px) + var(--tx-glow-spread, 5px) + 2px);
  z-index: 2;
}

.toolbar-x-pill-gradient {
  position: absolute;
  inset: calc(var(--tx-glow-spread, 5px) * -1);
  border-radius: calc(var(--tx-item-radius, 18px) + var(--tx-glow-spread, 5px));
  background: conic-gradient(from var(--toolbar-x-angle),
      #8b6914 0deg,
      #cd9b1d 30deg,
      #ffd700 60deg,
      #fff8dc 80deg,
      #ffd700 100deg,
      #b8860b 130deg,
      #8b6914 160deg,
      #a0762c 180deg,
      #daa520 210deg,
      #ffd700 240deg,
      #f0e68c 260deg,
      #ffd700 280deg,
      #cd853f 310deg,
      #b8860b 340deg,
      #8b6914 360deg);
  animation: toolbar-x-rotate-glow 3s linear infinite;
  z-index: 3;
}

.toolbar-x-pill-inner {
  position: absolute;
  inset: 0;
  border-radius: var(--tx-item-radius, 18px);
  z-index: 4;
}

.toolbar-x-toggle {
  position: relative;
  width: var(--tx-item-size, 72px);
  height: var(--tx-item-size, 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tx-item-radius, 18px);
  cursor: pointer;
  transition: color 0.45s ease, background 0.45s ease, transform 0.2s ease;
  border: none;
  outline: none;
  padding: 0;
  flex-shrink: 0;
  z-index: 1;
}

.toolbar-x-toggle:hover {
  transform: scale(1.06);
}

.toolbar-x-toggle:active {
  transform: scale(0.94);
}

.toolbar-x-toggle .tx-icon {
  width: var(--tx-icon-size, 30px);
  height: var(--tx-icon-size, 30px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.toolbar-x-toggle .tx-icon svg {
  width: 100%;
  height: 100%;
}

.toolbar-x-toggle.spin .tx-icon {
  transform: rotate(360deg);
}