@use "palette" as *;

// Layer 1 — Ghost bar (hover reveal)

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: 48px;
  }

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

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

  .prompt-name {
    color: $magenta;
    font-size: 17px;
    padding: 0 0 0 14px;
  }

  .prompt-cursor {
    color: $lilac;
    font-size: 17px;
    font-weight: 900;
  }

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

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

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

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

  .gpu { color: $mitsuri; }

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

  // ── network ──
  .network {
    color: $lavande;
    font-size: 15px;
    padding: 0 10px;
    &.disconnected { color: $danger; }
  }

  // ── volume ──
  button.volume,
  button.muted {
    background: transparent;
    border: none;
    padding: 0 8px;
    min-width: 0;
    min-height: 0;

    label { color: $magenta; }
    &.muted label { color: rgba(255, 77, 166, 0.30); }
    &:hover label { color: $lilac; }
  }

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

  // ── media ──
  .media-module {
    padding: 0 4px;
  }

  .media {
    padding: 0 4px;

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

  .media-text {
    color: $lilac;
    font-size: 15px;
    font-weight: normal;
    padding: 0 6px;
  }

  .media-prev,
  .media-play,
  .media-next {
    background: transparent;
    border: none;
    padding: 0 3px;
    min-width: 0;
    min-height: 0;

    label { color: $lilac; font-size: 16px; }
    &:hover label { color: $magenta; }
  }

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

  .systray-item {
    background: transparent;
    border: none;
    padding: 0 3px;
    min-width: 0;
    min-height: 0;

    &:hover {
      background: rgba(201, 160, 255, 0.12);
      border-radius: $radius-sm;
    }
  }

  // ── hover effects ──
  .module:hover,
  .clock:hover,
  .cpu:hover,
  .ram:hover,
  .network:hover,
  .battery:hover {
    color: $lilac;
  }

  // ── 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;
    }
  }
}