listview,
list {
  color: $view_fg_color;
  background-color: $view_bg_color;
  background-clip: padding-box;
  border-color: $border_color;

  > row {
    padding: 2px;
    background-clip: padding-box;
  }

  > row.expander { padding: 0px; }
  > row.expander .row-header { padding: 2px; }

  &.horizontal row.separator,
  &.separators.horizontal > row:not(.separator) {
    border-left: 1px solid $border_color;
  }

  &:not(.horizontal) row.separator,
  &.separators:not(.horizontal) > row:not(.separator) {
    border-bottom: 1px solid $border_color;
  }
}

row {
  @include focus-ring();

  .osd &:focus:focus-visible {
    outline-color: $osd_focus_color;
  }

  background-clip: padding-box;

  &.activatable {
    &:hover { background-color: $view_hover_color; }

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

    // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
    &.has-open-popup { background-color: $view_hover_color; }

    &:selected {
      &:hover { background-color: $view_selected_hover_color; }

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

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

  &:selected {
    background-color: $view_selected_color;
  }
}

/*******************************************************
 * Rich Lists                                          *
 * Large list usually containing lots of widgets       *
 * https://gitlab.gnome.org/GNOME/gtk/-/issues/3073    *
 *******************************************************/

.rich-list { /* rich lists usually containing other widgets than just labels/text */
  > row {
    padding: 8px 12px;
    min-height: 32px; /* should be tall even when only containing a label */

    > box {
      border-spacing: 12px;
    }
  }
}

/****************
 * AdwActionRow *
 ****************/

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

  > box.header {
    margin-left: 12px;
    margin-right: 12px;
    min-height: 50px;

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

    > box.title {
      margin-top: 6px;
      margin-bottom: 6px;
      border-spacing: 3px;
    }
  }
}

/***************
 * AdwComboRow *
 ***************/

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

  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 {
  @include focus-ring($offset: -1px);

  .osd &:focus:focus-visible {
    outline-color: $osd_focus_color;
  }

  transition: 200ms $ease-out-quad;
  border-bottom: 1px solid $border_color;

  &:not(:selected).activatable {
    &:hover {
      background-color: gtkalpha(currentColor, .03);
    }

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

    &.has-open-popup {
      background-color: gtkalpha(currentColor, .03);
    }
  }
}

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: gtkalpha($card_shade_color, .5);
    color: inherit;
  }

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

  // AdwExpanderRow arrow rotation

  image.expander-row-arrow {
    transition: 200ms $ease-out-quad;
    @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.25turn);
    }

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

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

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

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

/*****************
 * 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: $card_radius;
        border-top-right-radius: $card_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: $card_radius;
        border-bottom-right-radius: $card_radius;
        border-bottom-width: 0;
      }
    }
  }
}
