@use "palette" as *;

// Layer 1 — Ghost bar (hover reveal)
// GTK CSS alpha() must be unquoted strings to pass through SCSS compiler

window.Bar {
  background: transparent;

  > centerbox {
    background: rgba(38, 21, 55, 0.88);  // $base @ 0.88
    border-radius: $radius;
    border: 3px solid rgba(255, 77, 166, 0.60);  // $magenta @ 0.60
    margin: 6px 8px;
    padding: 0 8px;
    min-height: 38px;
  }

  .modules-left,
  .modules-center,
  .modules-right {
    padding: 0 4px;
  }

  .module {
    padding: 0 8px;
    color: $text;

    &:hover {
      color: $lilac;
    }
  }

  .separator {
    color: rgba(240, 234, 248, 0.12);  // $text @ 0.12
    font-size: 11px;
    padding: 0 4px;
    font-weight: normal;
  }

  // ── clock ──
  .clock {
    color: $magenta;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.04em;
    padding: 0 10px;

    &:hover { color: $lilac; }
  }

  .date {
    color: $lavande;
    font-size: 12px;
    font-weight: normal;
    padding: 0 10px 0 2px;
  }

  // ── system ──
  .cpu { color: $lavande; }
  .ram { color: $magenta; }
  .temp {
    color: rgba(164, 180, 255, 0.60);  // $lavande @ 0.60
    font-size: 11px;
    font-weight: normal;
  }

  .cpu, .ram, .temp {
    &.warning { color: $champagne; }
    &.critical { color: $danger; }
  }

  // ── network ──
  .network {
    color: $lavande;
    font-size: 12px;
    &.disconnected { color: $danger; }
  }

  // ── volume ──
  .volume {
    color: $magenta;
    &.muted { color: rgba(255, 77, 166, 0.30); }
  }

  // ── battery ──
  .battery {
    color: $magenta;
    &.charging { color: $mitsuri; }
    &.low { color: $danger; }
    &.warning { color: $champagne; }
  }

  // ── media ──
  .media {
    color: $lilac;
    font-size: 12px;
    font-weight: normal;
    padding: 0 10px;

    &.paused {
      color: rgba(201, 160, 255, 0.50);  // $lilac @ 0.50
      font-style: italic;
    }
  }

  // ── systray ──
  .systray {
    padding: 0 6px;
  }

  // ── workspaces ──
  .workspaces button {
    background: transparent;
    color: $muted;
    min-width: 22px;
    min-height: 22px;
    border-radius: $radius-sm;
    margin: 2px;
    padding: 0;

    &.active {
      background: rgba(255, 77, 166, 0.20);
      color: $magenta;
      border: 1px solid rgba(255, 77, 166, 0.40);
    }

    &.occupied { color: $lilac; }
    &:hover {
      background: rgba(201, 160, 255, 0.12);
      color: $lilac;
    }
  }
}