.system-menu-box {
  @include window;
  background-color: $colorbarbg;
  border: 3px solid $border;
  // color: $colortext;
}

.separator {
  font-size: 1rem;
}

.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;
    }
  }
}

.system-row {
  font-family: Rubik;
  // margin: .5rem .7rem;
  margin-top: 27px;

  .airplane-box button {
    padding: 1rem 3rem;
  }

  .power-box button {
    padding-left: 30px;
    padding-right: 30px;
  }

  label {
    font-size: 1rem;
  }
}

.element {
  font-family: 'Rubik';
  border-top-left-radius: 31px;
  border-top-right-radius: 31px;
  border-bottom-left-radius: 31px;
  border-bottom-right-radius: 10px;
  background-color: $secondaryContainer;
  color: $onSecondaryContainer;
  margin: .3rem;
  box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);

  button {
    border-top-left-radius: 31px;
    border-top-right-radius: 31px;
    border-bottom-left-radius: 31px;
    border-bottom-right-radius: 10px;
    padding: 1rem;

    label {
      font-size: 1.5rem;
    }

    &:hover {
      background: $overlay0;
    }
  }
}

.sliders {
  font-family: 'Rubik', 'Material Symbols Rounded';
  @include rounding;
  background-color: $surface0;
  margin: .5rem 1rem;
  padding: .6rem 1rem;

  scale {
    margin-right: -1rem;
    min-width: 25.8rem;
  }

  scale trough {
    background-color: $bg1;
    border-radius: 24px;
    margin: 0 1rem;
    min-height: 10px;
    min-width: 70px;
  }

  box {
    margin: .2rem 0;
  }

  label {
    font-size: 1.2rem;
  }
}

.sliderbg {
  background-color: transparent;
  padding: 0px;
}

.volume-bar highlight {
  font-family: SF Mono Nerd Font;
  @include rounding;
  background: $color6;
  // background-image: linear-gradient(to right, $tokyocyan 30%, $tokyopurple 100%);
}

.volume-slider-box scale highlight {
  @include rounding;
  background: $color6;
  // background-image: linear-gradient(to right, $tokyocyan 30%, $tokyopurple 100%);
  // border: 2px solid;
  min-height: 0.9rem;
}

// .volume-slider-box scale {
//   @include rounding;
//   background-color: #1A1B26;
//   border: 2px solid;
// }

.bottom-row {
  margin: .5rem 1rem;

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

  .battery-wattage {
    color: $color7;
  }

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

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

    label {
      font-size: 1.5rem;
    }

    &:hover {
      background: $overlay0;
    }
  }
}

.power-button {
  min-height: 2.5rem;
  // min-width: 2.5rem;
}