.nautilus-window {

    .nautilus-empty-state-icon {
        opacity: 0.5;
    }
    
    // Yaru change: force focus state
    .nautilus-canvas-item {
        &, &:focus {
            border-radius: 5px;

            // Drop border-radius for the image preview
            &:not(:dir(ltr)):not(:dir(rtl)) {
                border-radius: 0;
            }
        }
    }
    
    @keyframes needs_attention_keyframes {
        0% {
            background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0);
            border-color: $borders_color;
        }
    
        30% {
            background-image: linear-gradient(to bottom, $base_color, $base_color, $base_color);
            border-color: $fg_color;
        }
        90% {
            background-image: linear-gradient(to bottom, $base_color, $base_color, $base_color);
            border-color: $fg_color;
        }
        100% {
            background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0);
            border-color: $borders_color;
        }
    }
    
    .nautilus-operations-button-needs-attention {
        animation: needs_attention_keyframes 2s ease-in-out;
    }
    .nautilus-operations-button-needs-attention-multiple {
        animation: needs_attention_keyframes 3s ease-in-out;
        animation-iteration-count: 3;
    }
    
    /* Remove white background and highlight on hover which GTK adds by default
     * to GtkListBox. TODO: Switch to GtkListView and drop this CSS hack. */
    .operations-list,
    .operations-list > :hover {
        background: none;
    }
    
    .disclosure-button {
        padding-left: 4px;
        padding-right: 4px;
    }
    
    /* Path bar */
    
    .nautilus-path-bar scrolledwindow {
        border-radius: 5px 0px 0px 5px;
        border: 1px $borders_color solid;
        border-right-width: 0px;
        background-color: $bg_color;
    }
    .nautilus-path-bar scrolledwindow undershoot.left {
        border-radius: 5px 0px 0px 5px;
        background: linear-gradient(to right, $bg_color 6px, transparentize($bg_color, 1) 24px);
    }
    .nautilus-path-bar scrolledwindow undershoot.right {
        background: linear-gradient(to left, $bg_color 6px, transparentize($bg_color, 1) 24px);
    }
    
    .nautilus-path-bar > button,
    .path-buttons-box button {
        margin: 0px;
    }
    
    .path-buttons-box button {
        background-image: none;
        box-shadow: none;
        border-radius: 5px;
        border-width: 0px;
        -gtk-icon-shadow: none;
    }
    
    .path-buttons-box button:not(.current-dir):not(:backdrop):hover {
        background: transparentize($fg_color, 0.85);
        box-shadow: inset 0 0 0 2px $bg_color;
    }
    
    .path-buttons-box button:not(.current-dir):not(:backdrop):hover * {
        opacity: 1;
    }
    
    /* Make the tags fit into the box */
    entry.search > * {
        margin: 5px;
    }
    
    $disk_space_unknown: #888a85;
    $disk_space_used: #cf7272;
    $disk_space_free: #eeeeec;
    
    .disk-space-display {
        border-style: solid;
        border-width: 2px;
    }
    
    .disk-space-display.unknown {
        background-color: $disk_space_unknown;
        border-color: shade($disk_space_unknown, 0.7);
        color: $disk_space_unknown;
    }
    .disk-space-display.unknown.border {
        color: shade($disk_space_unknown, 0.7);
    }
    
    .disk-space-display.used {
        background-color: $disk_space_used;
        border-color: shade($disk_space_used, 0.7);
        color: $disk_space_used;
    }
    .disk-space-display.used.border {
        color: shade($disk_space_used, 0.7);
    }
    
    .disk-space-display.free {
        background-color: $disk_space_free;
        border-color: shade($disk_space_free, 0.7);
        color: $disk_space_free;
    }
    .disk-space-display.free.border {
        color: shade($disk_space_free, 0.7);
    }
    
    /* As a workaround for GtkTreeView showing thick border above first row when
     * horizontal grid lines are enabled, we add them using CSS instead. Exclude the
     * drop targets to let through the default feedback style. */
    .nautilus-list-view .view:not(:drop(active)) {
        border-bottom: 1px solid $bg_color;
    }
    
    .nautilus-list-view.thumbnail {
        -gtk-icon-shadow: 0px 1px 2px $borders_color, 1px 0px 0px transparentize($borders_color, 0.75),
            -1px 0px 0px transparentize($borders_color, 0.75), 0px 2px 0px transparentize($borders_color, 0.5);
    }
    
    .search-information {
        background-color: $selected_bg_color;
        color: white;
        padding: 2px;
    }
    
    $conflict_bg: #fef6b6;
    
    .conflict-row {
        background: $conflict_bg;
        color: black;
    }
    
    .conflict-row:hover {
        background-color: shade($conflict_bg, 0.9);
    }
    
    .conflict-row:selected {
        background: $selected_bg_color;
        color: $selected_fg_color;
    }
    
    /* Icon view */
    flowbox {
        padding: 18px;
    }
    
    flowboxchild {
        padding: 0px;
    }
    
    flowboxchild:selected {
        background-color: transparent;
        outline-color: transparent;
    }
    
    flowboxchild .thumbnail {
        margin: 4px;
        box-shadow: 0px 1px 2px 0px transparentize($borders_color, 0.5), 0px 0px 0px 1px transparentize($borders_color, 0.5),
            0px 2px 0px 0px transparentize($borders_color, 0.5);
        border-radius: 2px;
    }
    
    .icon-ui-labels-box {
        padding: 2px 4px;
        border-radius: 4px;
    }
    
    flowboxchild:selected .icon-ui-labels-box {
        color: $selected_fg_color;
        background-color: $selected_bg_color;
    }
    
    flowboxchild:selected image {
        -gtk-icon-effect: dim; /* GTK 3 only */
        /* GTK 4 TODO: Replace previous line with the following one:
      -gtk-icon-filter: opacity(0.5);
      */
        -gtk-icon-shadow: 0px 0px $selected_bg_color;
    }

    // Due to the ubuntu orange being quiet bright
    // we change the nautilus row selection from a full orange
    // row to a soft gray selection
    // until the nautilus gtk4 port lands in Ubuntu
    $_row_hover_bg: if($variant=='light', transparentize(black, 0.96), transparentize(white, 0.96));
    $_row_selection_bg: if($variant=='light', transparentize(black, 0.91), transparentize(white, 0.91));
    $_backdrop_row_selection_bg: if($variant=='light', $_row_selection_bg, lighten($_row_selection_bg, 2%));

    .sidebar-row {
        &:hover:not(:backdrop):not(:selected) {
            background: $_row_hover_bg;
        }

        &:selected {
            &.activatable, & {
                &:focus, &:hover, &:disabled, & {
                    background: $_row_selection_bg;
                }

                &:disabled {
                    &, button, button image { color: $insensitive_fg_color; }
                }

                &:focus, &:hover, & {
                    &, button, button image { color: $text_color; }
                    button.suggested-action, button.destructive-action { &:not(.image-button) { &, & image { color: white; } } }  
                }

                &:backdrop {
                    &, button, button image { color: $backdrop_fg_color; }
                    button.suggested-action, button.destructive-action { &:not(.image-button) { &, & image { color: white; } } }
                    background: $_backdrop_row_selection_bg;
                }

                &:disabled {
                    &, &:backdrop {
                        &, button, button image { color: $insensitive_fg_color; }
                    }
                }
            }
        }
    }

    .nautilus-canvas-item.dim-label,
    .nautilus-list-dim-label {
        color: mix($text_color, $base_color);
    }

    // keep details box visible
    // details box looks ugly when many items are selected and it floats above the orange
    background-image: none;
    background-color: if($variant=='light', white, $bg_color);

    &:backdrop {
        background-color: if($variant=='light', $backdrop_base_color, $backdrop_bg_color);
    }

    placessidebar {
        background-color: if($variant=='light', $bg_color, $base_color);

        &:backdrop {
            background-color: $backdrop_bg_color;
        }
    }

    // Makes icons less bright in backdrop
    @at-root %dim_icons_in_backdrop,
    & *scrolledwindow:backdrop {
        opacity: 0.9;
    }

    infobar {
        background-color: transparentize($fg_color, if($variant == 'light', .93, .95));
      
        &:backdrop {
          background-color: transparentize($fg_color, if($variant == 'light', .96, .98));
        }
    }

    paned box.floating-bar {
        background-color: $bg_color;
        border-style: solid;
        border-color: if($variant=='light', lighten($borders_color, 8.3%), darken($borders_color, 1%));
        border-width: 1px 0 0 1px;
        border-radius: $button_radius 0 0 0;

        button:dir(ltr).circular.flat.image-button {
            background: radial-gradient(circle at 50%, white 35%, $bg_color 1%);
            color: $destructive_color;
        }

        button:dir(ltr).circular.flat.image-button:hover {
            border: 1px solid $borders_color;
            background: radial-gradient(circle at 50%, white 30%, $base_hover_color 16%);
            color: lighten($destructive_color, 5%);

        }
    }

    treeview:drop(active):focus {
        // drop target green bottom border was missing
        border-bottom: 1px solid $drop_target_color;
    }

    treeview.view header button {
        background-color: if($variant=='light', $base_color, $base_color);
        background-image: none;
        border-color: transparentize($borders_color, 0.6);
        border-left: 1px;

        &:hover {
            background-color: $bg_color;
        }

        &:backdrop {
            background-color: $backdrop_base_color;
        }
    }

    .nautilus-list-view .view {
        border-bottom: 1px solid transparentize($borders_color, 0.8);

        // Hide superfluous treeview drop target indication
        &.dnd {
            border-style: none;
        }

        treeview {
            &:selected {
                &:backdrop {
                    color: $backdrop_fg_color;
                    background-color: if($variant=='light', darken($bg_color, 5%), lighten($base_color, 5%));
                }
            }
        }
    }

    notebook>header {
        background: $bg_color;
    }

    paned>separator {
        // separator between sidebar and main window view
        background-image: image(if($variant=='light', transparentize($borders_color, 0.6), darken($borders_color, 1%)));

        &:backdrop {
            background-image: image(transparentize($borders_color, 0.7));
        }
    }

    /* dim the icon when not checked */

    // This is the Icon + Text beneath - it's one widget
    .nautilus-canvas-item {
        outline-width: 0;
        // First, remove the background
        background-color: transparentize($fg_color, .95);

        // Then bring it back for when it receives a direction
        &:selected:not(:backdrop) {
            &:dir(ltr),
            &:dir(rtl) {
                background-color: $selected_bg_color;
            }

            color: $selected_fg_color;
        }

        // Fix some broken image preview (was dark)
        &:not(:focus) {
            &:not(:dir(ltr)):not(:dir(rtl)) {
                background: white;
            }
        }

        &:backdrop:selected {
            background-color: $selected_bg_color;
            color: $backdrop_selected_fg_color;
        }
    }
}
