window.settings-dialog {
  background-color: $bg;
  color: $fg;

  .header {
    background-color: $widget-bg;
    margin-top: $spacing * 0;

    .pager {
      @include spacing(.5);
    }

    padding: $padding;

    button {
      @include button;
      font-weight: normal;
      padding: $padding * .5 $padding;

      box {
        @include spacing($spacing: 3em);
      }
    }

    button.close {
      padding: $padding * .5;
    }

    button.reset {
      @include button($flat: true);
      padding: $padding * .5;
    }
  }

  .sidebar {
    background-color: $widget-bg;
    color: $fg;
    padding: $padding;
    min-width: 10rem;
    border-right: 2px solid $widget-bg;

    button {
      @include button;
      padding: $padding;
      font-weight: normal;
      color: $fg;
      background-color: $widget-bg;
      border: none;
      margin: $spacing*.5;

      &:hover {
        background-color: lighten($widget-bg, 10%);
      }
    }

    button.active {
      background-color: $primary-bg;
      color: $fg;
    }
  }


  .page {
    @include scrollable($top: true);

    .page-content {
      padding: $padding * 2;
      padding-top: 0;
      margin: $spacing;
    }
  }

  .group {
    .group-title {
      color: $primary-bg;
      margin-bottom: $spacing * .5;
    }

    .group-reset {
      @include button($flat: true);
      margin: $spacing * .5;
      padding: $padding * .5;

      &:disabled {
        color: transparent;
      }
    }

    &:not(:first-child) {
      margin-top: $spacing;
    }
  }

  .row {
    background-color: $widget-bg;
    padding: $padding * 2;
    border: $border;
    border-top: none;

    &:first-child {
      border-radius: $radius $radius 0 0;
      border: $border;
    }

    &:last-child {
      border-radius: 0 0 $radius $radius;
    }

    &:first-child:last-child {
      border-radius: $radius;
      border: $border;
    }

    button.reset {
      margin-left: $spacing;
    }

    label.id,
    label.note {
      color: transparentize($fg, .4);
    }

    entry,
    button {
      @include button;
      padding: $padding;
    }

    switch {
      @include switch;
    }

    spinbutton {
      @include unset;

      entry {
        border-radius: $radius 0 0 $radius;
      }

      button {
        border-radius: 0;
      }

      button:last-child {
        border-radius: 0 $radius $radius 0;
      }
    }

    .enum-setter {
      label {
        background-color: $widget-bg;
        border: $border;
        padding: 0 $padding;
        border-radius: $radius 0 0 $radius;
      }

      button {
        border-radius: 0;
      }

      button:last-child {
        border-radius: 0 $radius $radius 0;
      }
    }

    &.wallpaper {
      button {
        margin-top: $spacing * .5;
      }

      .preview {
        border-radius: $radius;
      }
    }
  }
}
