$bg: #1e1e2e;
$fg: #cdd6f4;
$blue: #89b4fa;
$surface: #313244;
$crust: #11111b;
$yellow: #f9e2af;

* {
  font-family: "sans-serif";
  font-size: 14px;
}

window {
  background-color: transparent;
}

button {
  all: unset;
}

.main-container {
  background-color: $bg;
  color: $fg;
  border-radius: 8px;
  padding: 2px 5px;
  margin: 1px;
}

.ws-focused {
  background-color: $blue;
  color: $crust;
  padding: 0 8px;
  border-radius: 6px;
  font-weight: bold;
}

.ws-inactive {
  color: #cdd6f4;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid #ffffff;
}

.ws-inactive:hover {
  background-color: $surface;
  border-radius: 6px;
}

.date-time {
  padding: 0 10px;
}

.date-time:hover {
  background-color: $surface;
  border-radius: 6px;
}

.battery-widget, .volume-widget, .brightness-widget, .caffeine {
  padding: 0 2px;
}

.tray-button {
  padding: 0 8px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.tray-button:hover {
  background-color: $surface;
}

.popup-box {
  background-color: $bg;
  color: $fg;
  padding: 15px;
  border: 1px solid $blue;
  border-radius: 8px;
}

.vol-bar trough, .br-bar trough {
  background-color: $surface;
  border-radius: 10px;
  min-height: 4px;
}

.vol-bar highlight {
  background-color: $blue;
  border-radius: 10px;
}

.br-bar highlight {
  background-color: $yellow;
  border-radius: 10px;
}

.caffeine {
  padding: 0 5px;
}

.caffeine-on {
  color: $yellow;
  font-weight: bold;
}

.caffeine-off {
  color: $fg;
  opacity: 0.6;
}

.tray-container {
  padding-left: 10px;
}

.calendar-box {
  background-color: $bg;
  color: $fg;
  padding: 15px;
  border: 1px solid $blue;
  border-radius: 12px;
}

calendar {
  padding: 5px;
}

.popup-title {
  font-size: 16px;
  font-weight: bold;
  color: $blue;
  margin-bottom: 5px;
}

.popup-subtitle {
  font-size: 12px;
  color: $fg;
  opacity: 0.8;
  margin-top: 5px;
}

.profile-active {
  background-color: $blue;
  color: $crust;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: bold;
}

.profile-inactive {
  background-color: $surface;
  color: $fg;
  padding: 8px 12px;
  border-radius: 6px;
}

.profile-inactive:hover {
  background-color: lighten($surface, 5%);
  border: 1px solid $blue;
}