/* system menu */
.system-menu-box { @include window; }

/* between net/bt and their arrows */
.separator {
  font-size: 1rem;
}

/* date & time */
.top-row {
  margin: 1rem 1.5rem 0;

  .time { font-size: 2rem; }

  .date-box {
    margin: 0 1rem;

    label { font-size: 1.1rem; }

    .date {
      background: unset;
      margin: 0 .5rem 0 0;
      padding: 0;
    }
  }
}

/* wifi/bt/airplane button boxes */
.system-row {
  margin: .5rem .7rem;

  /* the airplane icon is not properly spaced */
  .airplane-box button {
    padding: 1rem 3rem;
  }

  label {
    font-size: 1rem;
    margin: 0 .1rem;
  }
}

/* wifi/bt/airplane buttons */
.element {
  @include rounding;
  background-color: $bg1;
  margin: .3rem;

  button {
    @include rounding;
    padding: 1rem;

    label {
      font-size: 1.5rem;
    }

    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
}

/* volume & brightness sliders */
.sliders {
  @include rounding;
  background-color: $bg1;
  margin: .5rem 1rem;
  padding: .6rem 1rem;

  scale {
    margin-right: -1rem;
    min-width: 21.5rem;

    trough { margin-right: 0; }
  }

  box { margin: .2rem 0; }
  label { font-size: 1.2rem; }
}

.volume-slider-box,
.brightness-slider-box {
  trough { background-color: $base; }
}

.volume-bar highlight {
  @include rounding;
  background-image: linear-gradient(to right, $teal, $sky);
}

.brightness-slider-box scale highlight {
  @include rounding;
  background-image: linear-gradient(to right, $yellow, $peach);
}

/* battery & power button */
.bottom-row {
  margin: .5rem 1rem;

  .battery-icon {
    color: $green;
    font-size: 2rem;
  }

  .battery-icon .low { color: $red; }
  .battery-rate { color: $mauve; }

  .battery-status {
    color: $subtext0;
    margin: 0 .5rem;
  }

  button {
    background-color: $bg1;
    border-radius: 50%;
    margin-bottom: .1rem;
    padding: 0 .5rem;

    label { font-size: 1.5rem; }
    &:hover { background-color: $bg1; }
  }
}

/* set wifi/bt colors and dim buttons when hovering */
.element {
  button:hover { background-color: rgba(0, 0, 0, .1); }
}

.bt-connected {
  background-color: $blue;
  color: $crust;
}

.net-connected {
  background-color: $mauve;
  color: $crust;
}