// Font stuff
$font-size: 16px;
$icon-size: 18px;
$logo-size: 22px;

// Basic colors
$blue: #81a2be;
$cyan: #add9ff;
$black: #1d1f21;
$red: #cc6666;
$green: #b5bd68;
$yellow: #f0c674;
$magenta: #b294bb;
$white: #c5c8c6;

// Colors
$bg-color: #1d1f21;
$bg-alt-color: #131519;
$fg-color: #c5c8c6;
$fg-alt-color: #afafaf;
$fg-sel-color: $cyan;
$fg-desel-color: $fg-alt-color;
$border-color: #434549;

$fg-accent: $cyan;

// Misc
$anim-transition: 150ms;

* {
  all: unset; //Unsets everything so you can style everything from scratch
  font-family: "Lato Mono";
}

tooltip {
  color: $fg-color;
  background-color: $bg-alt-color;
  border-radius: 12px;
}

.bar-1,
.bar-2 {
  background-color: rgba(0, 0, 0, 0.5);
}

.main-cont {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1px;
}

.segment-start,
.segment-middle,
.segment-end {
}

.icon {
  opacity: 1;
  transition: opacity $anim-transition;
}

.icon:hover {
  opacity: 0.6;
}

.inactive,
.active {
  font-size: 1.4rem;
}

.inactive {
  color: $fg-alt-color;
  transition: color $anim-transition;
}
.active {
  color: $fg-color;
}

// POWERMENU
.pm-inner {
  padding-left: 6px;
  padding-right: 6px;
  margin-top: -1px;
}

.pm-inner button {
  font-size: 16px;
}

.poweroff {
  color: $red;
}

.reboot {
  color: $yellow;
}

.logout {
  color: $green;
}

.lock {
  color: $blue;
}

// ICON & LOGO
.icon {
  font-size: 1.2rem;
  padding-left: 6px;
  padding-right: 6px;
}

.logo {
  font-weight: 600;
}

.logo-seperator {
  border-left: 2px solid $fg-color;
}

.time {
  font-size: 0.85rem;
  font-weight: 600;
}

// Volume stuff
.vol {
  padding-left: 0;
}

.volbar trough highlight {
  background-color: $fg-accent;
  border-radius: 8px;
}

scale trough {
  all: unset;
  background-color: $bg-alt-color;
  border-radius: 8px;
  min-height: 6px;
  min-width: 70px;
  margin: 0px 8px 0px 0px;
}

.red {
  color: $red;
}
