//
// avatar
//

avatar {
  border-radius: $circular_radius;
  font-weight: bold;

  // The list of colors to generate avatars.
  // Each avatar color is represented by a font color, a gradient start color and a gradient stop color.
  // There are 8 different colors for avtars in the list if you change the number of them you
  // need to update the NUMBER_OF_COLORS in src/adw-avatar.c.
  // The 2D list has this form: ((font-color, gradient-top-color, gradient-bottom-color)).
  $avatarcolorlist: (
   (#cfe1f5, #83b6ec, #337fdc), // blue
   (#caeaf2, #7ad9f1, #0f9ac8), // cyan
   (#cef8d8, #8de6b1, #29ae74), // green
   (#e6f9d7, #b5e98a, #6ab85b), // lime
   (#f9f4e1, #f8e359, #d29d09), // yellow
   (#ffead1, #ffcb62, #d68400), // gold
   (#ffe5c5, #ffa95a, #ed5b00), // orange
   (#f8d2ce, #f78773, #e62d42), // raspberry
   (#fac7de, #e973ab, #e33b6a), // magenta
   (#e7c2e8, #cb78d4, #9945b5), // purple
   (#d5d2f5, #9e91e8, #7a59ca), // violet
   (#f2eade, #e3cf9c, #b08952), // beige
   (#e5d6ca, #be916d, #785336), // brown
   (#d8d7d3, #c0bfbc, #6e6d71), // gray
  );

  @for $i from 1 through length($avatarcolorlist) {
    &.color#{$i} {
      $avatarcolor: nth($avatarcolorlist, $i);
      background-image: linear-gradient(nth($avatarcolor, 2), nth($avatarcolor, 3));
      color: nth($avatarcolor, 1);
    }
  }

  &.contrasted { color: white; }

  &.image { background: none; }
}

//
// preferencespage
//

preferencespage > scrolledwindow > viewport > clamp > box {
  margin: 24px 12px;
  border-spacing: 24px;
}

preferencesgroup > box {
  &, .labels {
    border-spacing: $container_padding;
  }

  > box.header:not(.single-line) {
    margin-bottom: $container_padding;
  }

  > box.single-line {
    min-height: 34px;
  }
}

//
// AdwStatusPage
//

statuspage {
  > scrolledwindow > viewport > box {
    margin: 36px $container_padding * 2;
    border-spacing: 36px;

    > clamp > box {
      border-spacing: $container_padding * 2;

      > .icon {
        -gtk-icon-size: 128px;

        color: gtkalpha(currentColor, 0.55);

        &:disabled {
          opacity: $disabled_opacity;
        }

        &:not(:last-child) {
          margin-bottom: 24px;
        }
      }
    }
  }

  &.compact > scrolledwindow > viewport > box {
    margin: 24px 12px;
    border-spacing: 24px;

    > clamp > box {
      > .icon {
        -gtk-icon-size: 96px;

        &:not(:last-child) {
          margin-bottom: $container_padding * 2;
        }
      }

      > .title {
        font-size: 18pt;
      }
    }
  }
}