/*********
 * Lists *
 *********/
list {
  border-color: $border_color;
  background-color: $base_color;

  row {
    padding: $mini_padding;

    &:selected { 
      background-color: $primary_color;
      
      &:backdrop { background-color: backdrop($primary_color); }
    }
  }
}

// FIXME
$row_transition: $longer_transition, background-color 0, color 0;

row {
  @at-root %row_activatable,
  &.activatable {
    transition: $row_transition,
                background-size $ripple_duration $deceleration_curve,
                background-image $ripple_duration * 2 $deceleration_curve;
    box-shadow: inset 0 0 0 9999px transparent;
    background-image: radial-gradient(circle farthest-corner at center,
                                      transparent 10%,
                                      transparent 0%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1000% 1000%;
    
    // Buttons on rows have invisible text.
    button {
      color: $fg_color;
      
      > label {
        color: $fg_color;
      }
    }

    &:hover {
      transition: $row_transition,
                  box-shadow 0,
                  background-size $ripple_duration $deceleration_curve,
                  background-image $ripple_duration * 2 $deceleration_curve;
      box-shadow: inset 0 0 0 9999px $row_fill_color;
    }

    &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
    &:active {
      transition: $row_transition,
                  background-size 0,
                  background-image 0;
      animation: ripple_effect $longer_duration $deceleration_curve forwards;
      box-shadow: inset 0 0 0 9999px $semi_fill_color;
      background-image: radial-gradient(circle farthest-corner at center,
                                        $semi_fill_color 10%,
                                        transparent 0%);
      background-size: 0% 0%;
    }
  }

  &:selected { 
    @extend %selected_items;
    
    &:backdrop { background-color: backdrop($primary_color); }
  }
}
