@charset "UTF-8";

/***********
 * Sidebar *
 ***********/

@mixin selected-item-highlight {
  @if $new-highlight {
    background-color: gtk("@theme_selected_bg_color");
    color: gtk("@theme_button_foreground_active");
    border-right: 3px solid gtk("@theme_button_decoration_focus");
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0px;
  }
}
@mixin selected-item-highlight-rtl {
  @if $new-highlight {
    background-color: gtk("@theme_selected_bg_color");
    color: gtk("@theme_button_foreground_active");
    border-left: 3px solid gtk("@theme_button_decoration_focus");
    border-top: 0;
    border-bottom: 0;
    border-right: 0;
    border-radius: 0px;
  }
}

.sidebar {
  border: none;
  background-color: gtk("@theme_bg_color");
  &:selected {
    @extend %selected_items;
  }
  &:backdrop { 
    background-color: gtk("@theme_unfocused_bg_color");
  }
  row {
    transition: all 150ms $ease-out-quad;
  
    &:hover { transition: none; }
  
    &.activatable {
      border: 0;
      &:dir(ltr) {
        border-right: 3px solid transparent;
      }
      &:dir(rtl) {
        border-left: 3px solid transparent;
      }
      
      &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
  
      &:hover:dir(ltr) { 
        @include selected-item-highlight();
      }
      &:hover:dir(rtl) {
        @include selected-item-highlight-rtl();
      }
  
      &:active:dir(ltr) {
        @include selected-item-highlight();
      }
      &:active:dir(rtl) {
        @include selected-item-highlight-rtl();
      }
  
      &:selected {
        &:dir(ltr) {
          @include selected-item-highlight();
        }
        &:dir(rtl) {
          @include selected-item-highlight-rtl();
        }

        &:active {
          &:dir(ltr) {
            @include selected-item-highlight();
          }
          &:dir(rtl) {
            @include selected-item-highlight-rtl();
          }
        }
  
        &.has-open-popup,
        &:hover {
          &:dir(ltr) {
            @include selected-item-highlight();
          }
          &:dir(rtl) {
            @include selected-item-highlight-rtl();
          }
        }
  
        &:backdrop { 
          background-color: gtk("@theme_unfocused_selected_bg_color_alt");
        }
      }
    }
  
    &:selected { @extend %selected_items; }
  }
}

// Places sidebar is a special case, since the view here have to look like chrome not content, so we override text color
placessidebar {
  > viewport.frame { border-style: none; }

  row {
    // Needs overriding of the GtkListBoxRow padding
    min-height: 36px;
    padding: 0px;

    // Using margins/padding directly in the SidebarRow
    // will make the animation of the new bookmark row jump
    > revealer { padding: 0 14px; }

    &:selected { 
      color: gtk("@theme_selected_fg_color");
    }

    &:disabled { 
      color: gtk("@insensitive_fg_color");
    }

    &:backdrop {
      color: gtk("@theme_unfocused_fg_color");

      &:selected { 
        color: gtk("@theme_unfocused_selected_bg_color_alt");
      }

      &:disabled { 
        color: gtk("@insensitive_unfocused_fg_color");
      }
    }

    image.sidebar-icon {

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

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

    @at-root button.sidebar-button {
      @extend %button_basic.flat;

      @extend %undecorated_button;

      min-height: 26px;
      min-width: 26px;
      margin-top: 3px;
      margin-bottom: 3px;
      padding: 0;

    }

    // in the sidebar case it makes no sense to click the selected row
    &:selected:active { box-shadow: none; }

    &.sidebar-placeholder-row {
      padding: 0 8px;
      min-height: 2px;
      background-image: none;
      background-clip: content-box;
    }

    &.sidebar-new-bookmark-row { 
      color: gtk("@theme_selected_bg_color");
    }

    // &:drop(active):not(:disabled) {
    //   color: $drop_target_color;
    //   box-shadow: inset 0 1px $drop_target_color,
    //               inset 0 -1px $drop_target_color;
    //
    //   &:selected {
    //     color: $selected_fg_color;
    //     background-color: $drop_target_color;
    //   }
    // }
  }
}

placesview {
  .server-list-button > image {
    transition: 200ms $ease-out-quad;
    -gtk-icon-transform: rotate(0turn);
  }

  .server-list-button:checked > image {
    transition: 200ms $ease-out-quad;
    -gtk-icon-transform: rotate(-0.5turn);
  }

  row.activatable:hover { background-color: transparent; }

  // this selects the "connect to server" label
  > actionbar > revealer > box > label {
    padding-left: 8px;
    padding-right: 8px;
  }
}

stacksidebar {
  &.sidebar {
    row {
      padding: 10px 4px;
      > label {
        padding-left: 6px;
        padding-right: 6px;
      }
      &.needs-attention > .label {
        @extend %needs_attention;
        background-size: 6px 6px, 0 0;
      }
    }
  }
}
