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

$opaque_button_default_bg: gtkmix($base, $text, 85%);

button {
  @at-root %opaque_button {
    box-shadow: none;
    transition: $transition;

    .osd &:focus:focus-visible {
      outline: none;
    }

    &:hover {
      background-image: image(gtkalpha(currentColor, .1));
    }

    &.keyboard-activating,
    &:active {
      background-image: image(transparentize(black, .8));
    }

    &:checked {
      background-image: image(transparentize(black, .85));

      &:hover {
        background-image: image(transparentize(black, .95));
      }

      &.keyboard-activating,
      &:active {
        background-image: image(transparentize(black, .7));
      }
    }
  }

  &.opaque {
    @extend %opaque_button;

    background-color: $opaque_button_default_bg;
    color: $text;
  }

  &.destructive-action {
    @extend %opaque_button;

    color: on($destructive);

    &, &:checked {
      background-color: $destructive;
    }
  }

  &.suggested-action {
    @extend %opaque_button;

    color: on($suggested);

    &, &:checked {
      background-color: $suggested;
    }
  }

  // hide separators
  &.font {
    separator { background-color: transparent; }
    > box { border-spacing: $space-size; }
    > box > box > label { font-weight: bold; }
  }

  @at-root %pill_button,
  &.pill {
    padding: 10px 32px;
    border-radius: $circular-radius;
  }

  &.card {
    background-clip: padding-box;
    font-weight: inherit;
    padding: 0;
    @include button(normal);
    box-shadow: none;
    transition: $transition;

    &:hover {
      @include button(hover);
    }

    &.keyboard-activating,
    &:active {
      @include button(active);
    }

    &:checked {
      @include button(checked);
    }

    &:drop(active) {
      color: $drop_target_color;
      box-shadow: inset 0 0 0 1px $drop_target_color;
    }
  }
}

menubutton {
  &.osd {
    background: none;
    color: inherit;

    > button { @extend %button-on-dark; }
  }

  &.circular > button { @extend %circular-button; }
  &.flat > button { @extend %button-flat; }
  &.pill > button { @extend %pill_button; }

  &.suggested-action {
    background-color: $suggested;
    color: on($suggested);
  }

  &.destructive-action {
    background-color: $destructive;
    color: on($destructive);
  }

  &.opaque {
    background-color: $opaque_button_default_bg;
    color: $text;
  }

  &.suggested-action,
  &.destructive-action,
  &.opaque {
    border-radius: $corner-radius;

    &.circular, &.pill {
      border-radius: $circular-radius;
    }

    > button {
      @extend %opaque_button;

      &, &:checked {
        background-color: transparent;
        color: inherit;
      }
    }
  }

  &.image-button > button {
    min-width: 24px;
    padding-left: $space-size;
    padding-right: $space-size;
  }

  arrow {
    min-height: 16px;
    min-width: 16px;
    &.none {
      -gtk-icon-source: -gtk-icontheme('open-menu-symbolic');
    }
    &.down {
      -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
    }
    &.up {
      -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
    }
    &.left {
      -gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
    }
    &.right {
      -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
    }
  }
}

splitbutton {
  border-radius: $corner-radius;

  &, & > separator {
    transition: $transition;
    transition-property: background;
  }

  > separator {
    margin-top: $space-size;
    margin-bottom: $space-size;
    background: none;
  }

  // > menubutton > button { }

  // Since the inner button doesn't have any style classes on it,
  // we have to add them manually
  &.image-button > button {
    min-width: 24px;
    padding-left: $space-size;
    padding-right: $space-size;
  }

  &.text-button.image-button > button,
  &.image-text-button > button {
    padding-left: $space-size * 1.5;
    padding-right: $space-size * 1.5;

    > box {
      border-spacing: $space-size;
    }
  }

  // Reimplementing linked so we don't blow up css
  > button:dir(ltr),
  > menubutton > button:dir(rtl) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -1px;
  }

  > button:dir(rtl),
  > menubutton > button:dir(ltr) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
  }

  @at-root %flat_split_button,
  &.flat {
    > separator {
      background: $border;
    }

    &:hover,
    &:active,
    &:checked {
      background: gtkalpha(currentColor, 0.1);
      color: $text;

      > separator {
        background: none;
      }
    }

    &:focus-within:focus-visible > separator {
      background: none;
    }

    > button,
    > menubutton > button {
      @extend %button-flat;

      border-radius: $corner-radius;
    }
  }

  &.suggested-action {
    background-color: $suggested;
    color: on($suggested);
  }

  &.destructive-action {
    background-color: $destructive;
    color: on($destructive);
  }

  &.opaque {
    background-color: $opaque_button_default_bg;
    color: $text;
  }

  &.suggested-action,
  &.destructive-action,
  &.opaque {
    > button, > menubutton > button {
      @extend %opaque_button;

      &, &:checked {
        color: inherit;
        background-color: transparent;
      }
    }

    > menubutton > button {
      &:dir(ltr) { box-shadow: inset 1px 0 $border; }
      &:dir(rtl) { box-shadow: inset -1px 0 $border; }
    }
  }

  > menubutton > button > arrow.none {
    -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
  }
}

buttoncontent {
  border-spacing: $space-size;

  > label {
    font-weight: bold;

    &:dir(ltr) { padding-right: 2px; }
    &:dir(rtl) { padding-left: 2px; }
  }

  .arrow-button > box > &,
  splitbutton > button > & {
    > label {
      &:dir(ltr) { padding-right: 0; }
      &:dir(rtl) { padding-left: 0; }
    }
  }
}

//
// Toasts
//

toast {
  @extend %osd;
  margin: $space-size * 2;
  margin-bottom: 24px;
  border-radius: $circular-radius;
  border-spacing: $space-size;
  padding: $space-size;

  &:dir(ltr) { padding-left: $space-size * 2; }
  &:dir(rtl) { padding-right: $space-size * 2; }

  > widget {
    margin: 0 $space-size;
  }

  button {
    @extend %button-on-dark;
  }
}

//
// AdwStatusPage
//

statuspage {
  > scrolledwindow > viewport > box {
    margin: $space-size * 6 $space-size * 2;
    border-spacing: $space-size * 4;

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

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

        color: gtkalpha(currentColor, 0.45);

        &:disabled {
          opacity: 0.45;
        }

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

  &.compact > scrolledwindow > viewport > box {
    margin: $space-size * 4 $space-size 8 2;
    border-spacing: $space-size * 4;

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

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

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

// Cards
.card {
  @at-root %card, & {
    @include button(normal);
    border-radius: $corner-radius + 1px;
    box-shadow: none;
    border: 1px solid $border;
    background-clip: padding-box;
  }

  &.activatable {
    transition: $transition;

    &:hover {
      background-image: image(gtkalpha(currentColor, .03));
    }

    &:active {
      background-image: image(gtkalpha(currentColor, .08));
    }
  }
}

//
// preferencespage
//

preferencespage > scrolledwindow > viewport > clamp > box {
  margin: $space-size * 4 $space-size * 2;
  border-spacing: $space-size * 4;
}

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

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

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

//
// AdwStatusPage
//

statuspage {
  > scrolledwindow > viewport > box {
    margin: $space-size * 6 $space-size * 2;
    border-spacing: $space-size * 6;

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

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

        color: gtkalpha(currentColor, 0.55);

        &:disabled {
          opacity: 0.35;
        }

        &:not(:last-child) {
          margin-bottom: $space-size * 4;
        }
      }
    }
  }

  &.compact > scrolledwindow > viewport > box {
    margin: $space-size * 4 $space-size * 2;
    border-spacing: $space-size * 4;

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

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

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

//
// viewswitcher
//

viewswitcher {
  margin: 0;

  &.wide {
    border-spacing: 0;
    border-radius: $corner-radius;
    background-color: $fill;
    margin-top: $space-size;
    margin-bottom: $space-size;

    > button.toggle, > button.toggle.flat {
      padding: 0 $space-size;
    }

    button.toggle:checked, button.toggle.flat:checked {
      background-color: $primary;
      color: on($primary);

      &:backdrop { color: on($primary, disabled); }

      indicatorbin.needs-attention > indicator {
        > label { color: $primary; }
        background-color: on($primary);
      }
    }
  }

  &.narrow button.toggle {
    border-radius: 0;
    margin: 0;
    border: none;
  }

  button.toggle {
    font-weight: bold;
    padding: 0;
    min-height: 0;
    margin: 0;

    > stack > box {
      &.narrow {
        font-size: 0.75rem;
        padding-top: $space-size + 1px;
        padding-bottom: $space-size - 1px;
        border-spacing: $space-size - 2px;

        > stack > label {
          padding-left: $space-size + 2px;
          padding-right: $space-size + 2px;
        }
      }

      &.wide {
        padding: 0 $space-size * 2;
        border-spacing: $space-size;
      }
    }
  }
}

// AdwViewSwitcherBar
viewswitcherbar actionbar > revealer > box {
  padding: 0;
}

// AdwViewSwitcherTitle
viewswitchertitle {
  margin-top: 0;
  margin-bottom: 0;

  viewswitcher {
    margin-left: $space-size * 2;
    margin-right: $space-size * 2;

    &.narrow {
      margin-top: 0;
      margin-bottom: 0;

      button.toggle {
        > stack > box {
          &.narrow {
            padding-top: 0;
            padding-bottom: 0;
            border-spacing: 0;
          }
        }
      }
    }

    &.wide {
      margin-top: $space-size;
      margin-bottom: $space-size;
    }
  }

  windowtitle {
    margin-top: 0;
    margin-bottom: 0;
  }
}

// AdwIndicatorBin
indicatorbin {
  > indicator, > mask {
    min-width: $space-size;
    min-height: $space-size;
    border-radius: $circular-radius;
  }

  > indicator {
    margin: 1px;
    padding: 0;
    background: gtkalpha(currentColor, .4);

    > label {
      font-size: 0.6rem;
      font-weight: bold;
      padding: 2px 5px;
      color: white;
    }
  }

  > mask {
    padding: 1px;
    background: black;
  }

  &.needs-attention > indicator {
    background-color: $primary;

    > label { color: on($primary); }
  }
}

//
// AdwActionRow
//

row {
  label.subtitle {
    font-size: smaller;
    @extend .dim-label;
  }

  > box.header {
    margin-left: $space-size * 2;
    margin-right: $space-size * 2;
    min-height: $large-size;

    > .icon:disabled {
      filter: opacity(0.45);
    }

    > box.title {
      margin-top: $space-size;
      margin-bottom: $space-size;
      border-spacing: $space-size / 2;
    }
  }
}

//
// AdwComboRow
//

row.combo {
  image.dropdown-arrow:disabled {
    filter: opacity(0.45);
  }

  listview.inline {
    background: none;
    border: none;
    box-shadow: none;
    color: inherit;

    &, &:disabled {
      background: none;
      color: inherit;
    }
  }

  popover > contents {
    min-width: 120px;
  }
}

//
// AdwExpanderRow
//

@mixin margin-start($margin) {
  &:dir(ltr) {
    margin-left: $margin;
  }

  &:dir(rtl) {
    margin-right: $margin;
  }
}

%boxed_list_row {
  transition: 200ms $ease-out;
  border-bottom: 1px solid $border;

  &:not(:selected).activatable {
    &:hover {
      background-color: $overlay-hover;
    }

    &:active {
      background-color: $overlay-active;
    }

    &.has-open-popup {
      background-color: $overlay-selected;
    }
  }
}

row.expander {
  // Drop transparent background on expander rows to let nested rows handle it,
  // avoiding double highlights.
  background: none;
  padding: 0px;

  > box > list {
    background: none;
    color: inherit;
  }

  list.nested {
    background-color: $fill;
    color: inherit;
  }

  list.nested > row {
    @extend %boxed_list_row;
  }

  // AdwExpanderRow arrow rotation

  image.expander-row-arrow {
    transition: 200ms $ease-out;
    @include margin-start(6px);
  }

  &:checked image.expander-row-arrow {
    -gtk-icon-transform: rotate(0turn);
  }

  &:not(:checked) image.expander-row-arrow {
    @extend .dim-label;

    &:dir(ltr) {
      -gtk-icon-transform: rotate(0.5turn);
    }

    &:dir(rtl) {
      -gtk-icon-transform: rotate(-0.5turn);
    }
  }

  &:checked image.expander-row-arrow:not(:disabled) {
    color: $primary;
  }

  .osd &:checked image.expander-row-arrow:not(:disabled) {
    color: inherit;
  }

  image.expander-row-arrow:disabled {
    filter: opacity(0.45);
  }
}

//
// Boxed Lists
//

// Deprecated: use .boxed-list instead
list.content,
list.boxed-list {
  @extend %card;

  > row {
    // Regular rows and expander header rows background
    &, &.expander row.header {
      @extend %boxed_list_row;
    }

    &.expander {
      border: none;
    }

    // Rounded top
    &:first-child {
      &, &.expander row.header {
        border-top-left-radius: $corner-radius;
        border-top-right-radius: $corner-radius;
      }
    }

    // Rounded bottom
    &:last-child {
      &,
      &.expander:not(:checked),
      &.expander:not(:checked) row.header,
      &.expander:checked list.nested,
      &.expander:checked list.nested > row:last-child {
        border-bottom-left-radius: $corner-radius;
        border-bottom-right-radius: $corner-radius;
        border-bottom-width: 0;
      }
    }
  }
}

// Transition shadows
flap,
leaflet,
navigation-view,
overlay-split-view {
  @include transition-shadows($frame);
}

toolbarview.undershoot-top scrolledwindow {
  @include undershoot(top);
}

toolbarview.undershoot-bottom scrolledwindow {
  @include undershoot(bottom);
}

// Sidebar
.unfolded stacksidebar.sidebar { border: none; }

.sidebar-pane {
  background-color: $base-alt;
  color: $text;

  &:backdrop {
    background-color: $background;
    transition: background-color $duration $ease-out;
  }

  .navigation-sidebar,
  headerbar,
  searchbar > revealer > box {
    background-color: transparent;
    box-shadow: none;
    border: none;
  }

  toolbarview.undershoot-top scrolledwindow {
    @include undershoot(top);
  }

  toolbarview.undershoot-bottom scrolledwindow {
    @include undershoot(bottom);
  }

  scrolledwindow {
    &.undershoot-top {
      @include undershoot(top);
    }

    &.undershoot-bottom {
      @include undershoot(bottom)
    }

    &.undershoot-start {
      &:dir(ltr) { @include undershoot(left); }
      &:dir(rtl) { @include undershoot(right); }
    }

    &.undershoot-end {
      &:dir(ltr) { @include undershoot(right); }
      &:dir(rtl) { @include undershoot(left); }
    }
  }

  flap,
  leaflet,
  navigation-view,
  overlay-split-view {
    @include transition-shadows($frame);
  }

  banner > revealer > widget {
    background-color: gtkmix($primary, $base-alt, 30%);
    color: $text;

    &:backdrop {
      background-color: gtkmix($primary, $base-alt, 30%);
    }
  }

  &:dir(ltr), &.end:dir(rtl) {
    &, banner > revealer > widget {
      box-shadow: none;
      border-right: 1px solid $border;
    }
  }

  &:dir(rtl), &.end:dir(ltr) {
    &, banner > revealer > widget {
      box-shadow: none;
      border-left: 1px solid $border;
    }
  }
}

/* Middle pane in three-pane setups */
.content-pane .sidebar-pane,
.sidebar-pane .content-pane {
  background-color: $base;
  color: $text;

  &:backdrop {
    background-color: $background;
    transition: background-color $duration $ease-out;
  }

  toolbarview.undershoot-top scrolledwindow {
    @include undershoot(top);
  }

  toolbarview.undershoot-bottom scrolledwindow {
    @include undershoot(bottom);
  }

  scrolledwindow {
    &.undershoot-top {
      @include undershoot(top);
    }

    &.undershoot-bottom {
      @include undershoot(bottom)
    }

    &.undershoot-start {
      &:dir(ltr) { @include undershoot(left); }
      &:dir(rtl) { @include undershoot(right); }
    }

    &.undershoot-end {
      &:dir(ltr) { @include undershoot(right); }
      &:dir(rtl) { @include undershoot(left); }
    }
  }

  flap,
  leaflet,
  navigation-view,
  overlay-split-view {
    @include transition-shadows($border);
  }

  banner > revealer > widget {
    background-color: gtkmix($primary, $base, 30%);
    color: $text;

    &:backdrop {
      background-color: gtkmix($primary, $base, 30%);
    }
  }

  &:dir(ltr), &.end:dir(rtl) {
    &, banner > revealer > widget {
      box-shadow: none;
      border-right: 1px solid $border;
    }
  }

  &:dir(rtl), &.end:dir(ltr) {
    &, banner > revealer > widget {
      box-shadow: none;
      border-left: 1px solid $border;
    }
  }
}

.sidebar-pane .sidebar-pane {
  background-color: transparent;
  color: inherit;
}

// Gnome >= 45.0
.sidebar-pane,
.content-pane {
  headerbar {
    &, &:backdrop {
      background-color: transparent;
      box-shadow: none;
    }
  }
}

.top-bar {
  border: none;
  box-shadow: none;
  background-color: transparent;

  .collapse-spacing {
    padding: 0;
  }
}


// leaflet
leaflet {
  > box > scrolledwindow > viewport > widget > stack {
    background-color: $base;
  }
}

// Appearance preferences on gnome setting
preferencesgroup > box {
  button.background-preview-button.toggle {
    padding: 0;
    background: none;
    box-shadow: none;
    outline-color: transparent;
    outline-width: 2px;
    outline-offset: 3px;
    outline-style: solid;
    border: none;

    &, > background-preview {
      border-radius: $corner-radius;
    }

    &:hover {
      outline-color: $divider;
    }

    &:active {
      outline-color: $track;
    }

    &:checked {
      outline-color: $primary;
    }
  }
}

//
// tab-view
//

tabbar {
  .box {
    min-height: $menuitem-size;
  }

  tabbox {
    > tabboxchild {
      border-radius: 0;
      margin: 0;
    }

    > separator {
      margin-top: $space-size * 1.5;
      margin-bottom: $space-size * 1.5;
      transition: opacity 150ms ease-in-out;

      &.hidden {
        opacity: 0;
      }
    }

    > revealer > indicator {
      min-width: 2px;
      border-radius: 2px;
      margin: $space-size * 1.5 $space-size;
      background: gtkalpha($primary, 0.5);
    }
  }

  tab {
    transition: background 150ms ease-in-out;
    border-width: 1px;
    border-color: transparent;
    border-style: solid;
    min-height: $small-size;
    min-width: $small-size;
    padding: ($space-size / 2) 12px;
    background-clip: padding-box;
    color: $text-secondary;
    background-color: transparent;

    &:selected, &:checked, &:active, &:active:hover, &:checked:hover {
      background-color: $base;
      background-clip: padding-box;
      border-color: $solid-border;
      color: $text;
    }

    &:hover {
      background-color: $fill;
      box-shadow: none;
      color: $text;
    }
  }

  .start-action,
  .end-action {
    padding: 5px;
  }

  .start-action:dir(ltr),
  .end-action:dir(rtl) {
    padding-right: 0;
  }

  .start-action:dir(rtl),
  .end-action:dir(ltr) {
    padding-left: 0;
  }

  &:not(.inline) {
    .box {
      background-color: $background;
      color: $text-secondary;
      padding: 0;
      box-shadow: none;
      border-bottom: 1px solid $divider;
    }

    &:backdrop .box {
      > scrolledwindow,
      > .start-action,
      > .end-action {
        filter: opacity(0.5);
      }
    }
  }
}

dnd tab {
  background-color: $background;
  color: $text-secondary;
  box-shadow: none;
  margin: $space-size * 4;
}

tabbar,
dnd {
  tab {
    min-height: $menuitem-size;
    padding: $space-size / 2 $space-size;
    border-radius: $tab-radius $tab-radius 0 0;
    margin-top: $space-size / 2;
    margin-bottom: -1px;

    button.image-button {
      padding: 0;
      margin: 0;
      min-width: 20px;
      min-height: 20px;
      border-radius: $circular-radius;
      border: none;
      @extend %button-flat;
    }

    indicator {
      min-height: 2px;
      border-radius: 2px;
      background: gtkalpha($primary, 0.5);
    }
  }
}

tabview:drop(active),
tabbox:drop(active) {
  box-shadow: none;
}
