// Control center styling. Monochrome to match the transparent Waybar.

$fg: #ffffff;
$dim: rgba(255, 255, 255, 0.55);
// Black-based translucency (not white-tinted) to match the rest of the rice
// (Waybar's #waybar, fuzzel, dunst all use rgba(0, 0, 0, ...) over the
// compositor blur, rather than a lightened panel color).
$card: rgba(0, 0, 0, 0.16);
$card-hover: rgba(0, 0, 0, 0.26);
$track: rgba(255, 255, 255, 0.14);
$ink: #18181c;
$danger: #ff6b6b;

* {
  all: unset;
  font-family: "NotoSans Nerd Font Regular", "NotoSans Nerd Font", "Noto Sans", sans-serif;
  font-size: 13px;
  color: $fg;
}

// ---- panel -----------------------------------------------------------------

.cc {
  // Same near-transparent black as #waybar / fuzzel's background; the
  // compositor's own blur (layerrule-4 in modules/home/desktop.nix) does the rest, no
  // border, same as the rest of the rice.
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding: 14px;
}

.card {
  background-color: $card;
  border-radius: 18px;
  padding: 12px 14px;
}

.card-title {
  font-weight: bold;
}

// ---- tiles (Network / Bluetooth, Update NixOS) -----------------------------------

.tile {
  background-color: $card;
  border-radius: 18px;
  padding: 10px 12px;

  // Split tile: the padding moves onto the two halves, so each half's hover
  // highlight is a rounded shape of its own inside the tile.
  &.split {
    padding: 4px;
  }
}

.tile-wrap:hover .tile {
  background-color: $card-hover;
}

.toggle {
  padding: 6px;
  border-radius: 14px;
}

.open {
  padding: 6px 8px 6px 6px;
  border-radius: 14px;
}

.toggle-wrap:hover .toggle,
.open-wrap:hover .open {
  background-color: rgba(255, 255, 255, 0.06);
}

.chevron {
  font-size: 14px;
  color: $dim;
}

.open-wrap:hover .chevron,
.tile-wrap:hover .chevron {
  color: $fg;
}

.icon-circle {
  min-width: 38px;
  min-height: 38px;
  border-radius: 19px;
  background-color: $track;

  label {
    font-size: 18px;
  }

  // The NixOS snowflake sits a little left of centre in the font.
  .nix {
    font-size: 19px;
    padding-left: 2px;
  }

  &.on {
    background-color: $fg;

    label {
      color: $ink;
    }
  }
}

.tile-title {
  font-weight: bold;
}

.tile-sub {
  font-size: 11px;
  color: $dim;
}

// ---- sliders ------------------------------------------------------------------

.slider-icon {
  font-size: 17px;
  min-width: 24px;

  &.muted {
    color: $dim;
  }
}

.slider-val {
  font-size: 11px;
  color: $dim;
  min-width: 34px;
}

scale trough {
  min-height: 24px;
  border-radius: 12px;
  background-color: $track;
}

scale highlight {
  border-radius: 12px;
  background-color: $fg;
}

scale slider {
  min-width: 0;
  min-height: 24px;
  background-color: transparent;
}

// ---- system rings -----------------------------------------------------------------

.ring {
  color: $fg;
  background-color: $track;

  &.hot {
    color: $danger;
  }
}

.ring-value {
  font-weight: bold;
  font-size: 13px;
}

.ring-name {
  font-size: 11px;
  color: $dim;
}

// ---- power ------------------------------------------------------------------------

.power-btn {
  padding: 8px 10px;
  border-radius: 14px;

  &:hover {
    background-color: $card-hover;
  }
}

.power-icon {
  font-size: 20px;
}

.power-label {
  font-size: 10px;
  color: $dim;
}

.confirm {
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0.16);
}

// .btn-wrap is the eventbox (hover/click); .btn is the inner box that is
// actually drawn, since GTK ignores padding on an eventbox.
.btn {
  padding: 5px 14px;
  border-radius: 10px;
  background-color: $card-hover;

  &.danger {
    background-color: $danger;

    // `*` sets color on every label directly, so it has to be overridden on
    // the label rather than inherited from the box.
    label {
      color: $ink;
      font-weight: bold;
    }
  }
}

.btn-wrap:hover .btn {
  background-color: rgba(255, 255, 255, 0.14);

  &.danger {
    background-color: #ff8787;
  }
}

// ---- notifications --------------------------------------------------------------

.notif-header {
  padding: 0 4px;
}

// Each notification is a card of its own, like the control center's cards.
.notif {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  background-color: $card;
  transition: opacity 240ms ease-in, margin-left 280ms ease-in, margin-right 280ms ease-in;

  // Clearing: fade while sliding out to the right. The opposite margins keep the
  // width constant, so the entry moves instead of being squeezed.
  &.out {
    opacity: 0;
    margin-left: 70px;
    margin-right: -70px;
  }
}

.notif-wrap:hover .notif {
  background-color: $card-hover;
}

// Stagger: each entry leaves 45ms after the one above it.
@for $i from 0 through 9 {
  .notif.d#{$i} {
    transition-delay: #{$i * 45}ms;
  }
}

.notif-meta {
  font-size: 11px;
  color: $dim;
}

.notif-summary {
  font-weight: bold;
}

.notif-body,
.notif-empty {
  font-size: 12px;
  color: $dim;
}

.notif-empty {
  padding: 6px 4px 2px 4px;
}