window#quicksettings .window-content {
  @include floating-widget;
  @include spacing;

  .avatar {
    @include widget;
    opacity: 0.9;
  }

  .header {
    @include spacing($rec: true);

    button,
    .uptime,
    .battery {
      @include button;
      padding: $padding;
      font-weight: bold;
      min-height: 20px;
      min-width: 20px;

      image {
        font-size: 1.2em;
      }
    }

    .battery {
      @include spacing($multiplier: 0.5);
    }
  }

  .battery-progress {
    label {
      color: $accent-fg;
      font-weight: bold;
    }

    &.charging label {
      font-size: $padding * 2;
    }

    &.half label {
      color: $fg-color;
    }

    progressbar {
      @include slider($width: $padding * 3.6);
    }

    &.low progressbar {
      @include slider(
        $width: $padding * 3.6,
        $gradient: linear-gradient(to right, $red, $red)
      );
    }
  }

  .sliders-box {
    @include widget;
    @include spacing($rec: true);
    @include spacing(0);
    padding: $padding;

    button {
      @include button($flat: true);
      padding: $padding / 2;
    }

    scale {
      @include slider;
      margin-left: $spacing * -0.5;
    }

    .menu {
      margin: $spacing 0;
      background-color: $bg-color;
      border: $border-width solid $popover-border-color;
      border-radius: $radii;
    }
  }

  .mixer-item {
    scale {
      @include slider($width: 7px);
    }
    image {
      font-size: 1.2em;
    }
  }

  .row {
    @include spacing($rec: true);
  }

  .menu {
    @include unset;
    @include widget;
    @include spacing($rec: true);
    padding: $padding;
    margin-top: $spacing;

    .title {
      @include spacing(0.5);
    }

    separator {
      margin: 0 $radii / 2;
    }

    button {
      @include button($flat: true);
      padding: $padding / 2;
    }

    switch {
      @include switch;
    }
  }

  .toggle-button {
    @include button;
    font-weight: bold;

    .label-box {
      @include spacing(0.5);
    }

    button {
      @include button($flat: true);
      padding: $padding;

      &:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      &:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    &.active {
      background-color: $accent;

      label,
      image {
        color: $accent-fg;
      }
    }
  }

  .simple-toggle {
    @include button;
    padding: $padding $padding * 1.1;
  }

  .media {
    @include spacing;

    .player {
      @include media;
    }
  }
}