$row_transition: background-color 200ms $ease-out-quad,
                 background-image 200ms $ease-out-quad,
                 border-radius 200ms $ease-out-quad;

listview,
list {
  color: var(--view-fg-color);
  background-color: var(--view-bg-color);
  background-clip: padding-box;
  border-color: $border_color;

  &.view:disabled {
    color: var(--view-fg-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;
  }

  &:drop(active):focus,
  &:drop(active) {
    box-shadow: none;
  }
}

listview > header {
  @extend .heading;
  padding: 2px;
  padding-top: 18px;
  padding-bottom: 6px;
}

row {
  @include focus-ring();

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

      &:active { background-color: $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: $hover_color; }

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

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

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

    &:selected {
      background-color: $selected_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;
    }
  }

  > header {
    padding-left: 12px;
    padding-right: 12px;
  }
}

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

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

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

    > .icon:disabled {
      filter: Opacity(var(--disabled-opacity));
    }

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

      // Specificity bump for header bar
      &,
      > .title,
      > .subtitle {
        padding: 0;
        font-weight: inherit;
      }
    }

    > .prefixes,
    > .suffixes {
      border-spacing: 6px;

      > .suffixes {
        border-spacing: 6px;
      }
    }

    > .icon,
    > .prefixes {
      &:dir(ltr) { margin-right: 6px; }
      &:dir(rtl) { margin-left: 6px; }
    }
  }
}

/******************************
 * AdwEntryRow and AdwSpinRow *
 ******************************/

row.entry {
  &:disabled {
    text {
      opacity: var(--disabled-opacity);
    }

    .dimmed, .dim-label, .subtitle {
      opacity: 1;
    }
  }

  > box.header {
    border-spacing: 0;
    margin-left: 6px;
    margin-right: 6px;

    > .editable-area {
      padding: 0 6px;

      > .edit-icon, > .indicator {
        min-width: 24px;
        min-height: 24px;
        padding: 5px;
      }

      > .edit-icon, > .indicator, > .apply-button {
        &:dir(ltr) { margin-left: 6px; }
        &:dir(rtl) { margin-right: 6px; }
      }

      > .edit-icon:disabled {
        opacity: $strong_disabled_opacity;
      }

      > .indicator {
        opacity: $dimmer_opacity;

        @media (prefers-contrast: more) {
          opacity: $dimmer_opacity_hc;
        }
      }
    }

    > .prefixes {
      &:dir(ltr) { margin-left: 6px; }
      &:dir(rtl) { margin-right: 6px; }
    }

    > .suffixes {
      &:dir(ltr) { margin-right: 6px; }
      &:dir(rtl) { margin-left: 6px; }
    }
  }

  &.monospace {
    font-family: inherit;
    font-size: inherit;

    text {
      font-family: var(--monospace-font-family);
      font-size: var(--monospace-font-size);
    }
  }
}

row.spin {
  spinbutton {
    background: none;
    border-spacing: 6px;
    box-shadow: none;

    &, &:focus {
      outline: none;
    }

    > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child,
    > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
      &, &:dir(ltr):last-child, &:dir(rtl):first-child {
        @extend %button_basic;
        @extend %circular_button;
        min-width: 30px;
        min-height: 30px;
        margin: 10px 2px;
        border: none;
      }
    }
  }

  &:disabled spinbutton {
    > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child,
    > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
      &, &:dir(ltr):last-child, &:dir(rtl):first-child {
        &:disabled {
          filter: none;
        }
      }
    }
  }
}

row.entry,
row.spin {
  @include focus-ring($focus-state: '.focused', $offset: -1px, $transition: $row_transition);

  &:not(:selected).activatable.focused:hover,
  &:not(:selected).activatable.focused:active {
    background-color: transparent;
  }

  @each $e_type in error, warning, success {
    &.#{$e_type} {
      color: var(--accent-color);

      .dimmed, .dim-label, .subtitle {
        opacity: 1;
      }
    }
  }
}

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

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

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

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

  popover > contents {
    min-width: 120px;

    .combo-searchbar {
      margin: 6px;

      + scrolledwindow {
        @include undershoot(top);
      }
    }
  }
}

/******************
 * AdwExpanderRow *
 ******************/

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

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

%boxed_list_row {
  @include focus-ring($offset: -1px, $transition: $row_transition);

  border-bottom: 1px solid var(--card-shade-color);

  @media (prefers-contrast: more) {
    border-bottom: 1px solid $border_color;
  }

  &:not(:selected).activatable {
    &:hover {
      background-color: color-mix(in srgb, currentColor 3%, transparent);
    }

    &:active {
      background-color: color-mix(in srgb, currentColor 8%, transparent);
    }

    &.has-open-popup {
      background-color: color-mix(in srgb, currentColor 3%, transparent);
    }
  }
}

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: color-mix(in srgb, var(--card-shade-color) 50%, transparent);
    color: inherit;
  }

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

  // AdwExpanderRow arrow rotation

  image.expander-row-arrow {
    @extend .dimmed;

    transition: -gtk-icon-transform 200ms $ease-out-quad;
    @include margin-start(3px);

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

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

    &:disabled {
      filter: Opacity(var(--disabled-opacity));
    }
  }

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

    &:not(:disabled) {
      color: var(--accent-color);
    }
  }

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

/*****************
 * Property rows *
 *****************/

row.property {
  &, &.expander > box > list > row.header {
    > box.header > box.title {
      > .title {
        font-size: smaller;
        @extend .dimmed;
      }

      > .subtitle {
        font-size: inherit;
        opacity: 1;
      }
    }
  }

  &.monospace {
    &, &.expander > box > list > row.header {
      font-family: inherit;
      font-size: inherit;

      > box.header > box.title > .subtitle {
        font-family: var(--monospace-font-family);
        font-size: var(--monospace-font-size);
      }
    }
  }
}

/***************
 * AdwButtonRow *
 ***************/

row.button {
  > box {
    margin-left: 12px;
    margin-right: 12px;
    border-spacing: 6px;
    min-height: 40px;

    > .icon:disabled {
      filter: Opacity(var(--disabled-opacity));
    }
  }

  .title {
    @extend .heading;
  }

  &.suggested-action {
    background-color: var(--accent-bg-color);
    color: var(--accent-fg-color);
    border-bottom: none;

    @include focus-ring($outer: true, $offset: 1px, $transition: $row_transition);

    &:not(.expander):not(:selected).activatable {
      &:hover {
        background-color: var(--accent-bg-color);
        background-image: image(color-mix(in srgb, currentColor 10%, transparent));
      }

      &:active {
        background-color: var(--accent-bg-color);
        background-image: image(RGB(0 0 6 / 20%));
      }

      &.has-open-popup {
        background-color: var(--accent-bg-color);
        background-image: image(color-mix(in srgb, currentColor 10%, transparent));
      }
    }

    &:disabled {
      opacity: var(--disabled-opacity);

      > box > .icon:disabled,
      > box > label:disabled {
        filter: none;
      }
    }
  }

  &.destructive-action {
    color: var(--accent-color);
    --accent-bg-color: var(--destructive-bg-color);
    --accent-fg-color: var(--destructive-fg-color);
    --accent-color: var(--destructive-color);
  }
}

/*****************
 * Boxed Lists *
 *****************/

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

list.boxed-list-separate {
  background: none;
  color: var(--card-fg-color);

  > row {
    @extend %card;

    &:drop(active):focus,
    &:drop(active) {
      box-shadow: 0 0 0 1px RGB(0 0 6 / 3%),
                  0 1px 3px 1px RGB(0 0 6 / 7%),
                  0 2px 6px 2px RGB(0 0 6 / 3%),
                  inset 0 0 0 1px $drop_target_color;

      @media (prefers-contrast: more) {
        box-shadow: 0 0 0 1px $border_color,
                    0 1px 3px 1px RGB(0 0 6 / 7%),
                    0 2px 6px 2px RGB(0 0 6 / 3%),
                    inset 0 0 0 1px $drop_target_color;
      }
    }

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

    border: none;
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }

    @include focus-ring($offset: -1px, $transition: $row_transition);

    &:not(.expander) {
      &:not(:selected).activatable {
        &:hover {
          background-color: var(--card-bg-color);
          background-image: image(color-mix(in srgb, currentColor 3%, transparent));
        }

        &:active {
          background-color: var(--card-bg-color);
          background-image: image(color-mix(in srgb, currentColor 8%, transparent));
        }

        &.has-open-popup {
          background-color: var(--card-bg-color);
          background-image: image(color-mix(in srgb, currentColor 3%, transparent));
        }
      }
    }

    &.entry, &.spin {
      &:not(:selected).activatable.focused:hover,
      &:not(:selected).activatable.focused:active {
        background-color: var(--card-bg-color);
        background-image: none;
      }
    }

    &.expander {
      row.header {
        @extend %boxed_list_row;
        border-top-left-radius: $card_radius;
        border-top-right-radius: $card_radius;
      }

      &: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: none;
      }
    }
  }
}
