// The following styles are deprecated in GTK and should be removed for GTK 5.x

// .linked >                  element            child
$deprecated_linked_widgets: ("combobox",         "> box > button.combo"),
                            ("appchooserbutton", "> combobox > box > button.combo");

/***********************
 * GtkAppChooserDialog *
 ***********************/

window.appchooser:not(.ssd-frame) {
  headerbar.titlebar {
    @extend .flat;
    @extend %headerbar-shrunk;

    > windowhandle {
      padding-top: 3px;
    }

    box.start + box {
      margin-top: -6px;
      margin-bottom: -6px;
      min-height: 12px;
    }
  }

  searchbar {
    @extend %searchbar-flat;

    background: none;
  }

  &.csd searchbar {
    @extend %searchbar-shrunk;
  }

  .dialog-vbox > box > box:not(.dialog-action-area) {
    margin: 6px;
  }

  .dialog-action-area {
    margin-top: 0;
  }
}

/****************
 * GtkAssistant *
 ****************/

window.assistant {
  .sidebar {
    padding: $menu-margin;
    background-color: var(--sidebar-bg-color);
    color: var(--sidebar-fg-color);

    &:not(separator) {
      &:dir(ltr) {
        border-right: none;
        box-shadow: inset -1px 0 var(--sidebar-border-color);

        @media (prefers-contrast: more) {
          box-shadow: inset -1px 0 $border_color;
        }
      }

      &:dir(rtl) {
        border-left: none;
        box-shadow: inset 1px 0 var(--sidebar-border-color);

        @media (prefers-contrast: more) {
          box-shadow: inset 1px 0 $border_color;
        }
      }
    }

    &:backdrop {
      background-color: var(--sidebar-backdrop-color);
      transition: background-color $backdrop_transition;
    }

    > label {
      padding: 6px 12px;
      border-radius: $menu_radius;

      &.highlight {
        background-color: $selected_color;

        @media (prefers-contrast: more) {
          box-shadow: inset 0 0 0 1px $border_color;
        }
      }
    }
  }
}

/***************
 * GtkComboBox *
 ***************/

combobox {
  @extend dropdown;

  // Since cell view is taller than a plain label, make sure
  // the button doesn't get stretched with a larger font
  button {
    padding-top: 2px;
    padding-bottom: 2px;
    min-height: 30px;
  }
}

/***************
 * GtkIconView *
 ***************/

iconview {
  @extend %view;

  &:not(:selected) {
    // Hack to make it update colors when accent changes. The percentage is
    // small enough that background color is unaffected, but GTK will still
    // redraw the treeview on --accent-bg-color changes. This is absolutely
    // terrible but I'll take it over changing GtkCellRenderer code any day
    background-color: color-mix(in srgb, var(--accent-bg-color) 0.0001%, var(--view-bg-color));
  }

  @media (prefers-contrast: more) {
    &:selected {
      box-shadow: inset 0 0 0 1px $border_color;
    }
  }

  @include focus-ring();

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

  > dndtarget:drop(active) {
    border-style: solid;
    border-width: 1px;
    border-color: $drop_target_color;
  }
}

/**************
 * GtkInfoBar *
 **************/

infobar {
  > revealer > box {
    padding: 6px;
    padding-bottom: 7px;
    border-spacing: 6px;
    box-shadow: inset 0 -1px var(--shade-color);

    @media (prefers-contrast: more) {
      box-shadow: inset 0 -1px $border_color;
    }

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

  &.action:hover > revealer > box {
    background-image: image(color-mix(in srgb, currentColor 5%, transparent));
  }

  &.action:active > revealer > box {
    background-image: image(color-mix(in srgb, currentColor 10%, transparent));
  }

  @each $i_type, $i_color in (info, var(--accent-bg-color)),
                             (question, var(--accent-bg-color)),
                             (warning, var(--warning-bg-color)),
                             (error, var(--error-bg-color)) {
    &.#{$i_type} > revealer > box {
      background-color: color-mix(in srgb, $i_color 30%, var(--window-bg-color));
      color: var(--window-fg-color);
    }
  }

 .close {
    min-width: 18px;
    min-height: 18px;
    padding: 4px;
    border-radius: 50%;
    @extend %button_basic_flat;
  }
}

/****************
 * GtkStatusBar *
 ****************/

statusbar {
  padding: 6px 10px 6px 10px;
}

/***************
 * GtkTreeView *
 ***************/

// To be used for opaque elements overlaid atop the selected row
$treeview_selection_opaque: color-mix(in srgb, currentColor 10%, var(--view-bg-color));
$treeview_borders_opaque: color-mix(in srgb, currentColor 20%, var(--view-bg-color));
$treeview_borders_opaque_hc: color-mix(in srgb, currentColor 40%, var(--view-bg-color));

treeview.view {
  @extend columnview;

  &:disabled {
    color: color-mix(in srgb, var(--view-fg-color) var(--disabled-opacity), transparent);
  }

  &:not(:selected) {
    // Hack to make it update colors when accent changes. The percentage is
    // small enough that background color is unaffected, but GTK will still
    // redraw the treeview on --accent-bg-color changes. This is absolutely
    // terrible but I'll take it over changing GtkCellRenderer code any day
    background-color: color-mix(in srgb, var(--accent-bg-color) 0.0001%, var(--view-bg-color));
  }

  border-left-color: $treeview_borders_opaque; // this is actually the tree lines color,
  border-top-color: $treeview_borders_opaque; // while this is the grid lines color, better then nothing

  @media (prefers-contrast: more) {
    border-left-color: $treeview_borders_opaque_hc; // this is actually the tree lines color,
    border-top-color: $treeview_borders_opaque_hc; // while this is the grid lines color, better then nothing
  }

  &:selected {
    &:focus, & {
      border-radius: 0;
    }
  }

  &.separator {
    min-height: 2px;
    color: $border_color;
  }

  &.expander {
    // GtkTreeView uses the larger of the expander’s min-width and min-height
    min-width: 16px;
    min-height: 16px;
    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');

    &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }

    color: color-mix(in srgb, currentColor 70%, transparent);

    &:hover, &:active { color: currentColor; }

    &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }

    &:disabled { color: color-mix(in srgb, currentColor var(--disabled-opacity), transparent); }
  }

  > dndtarget:drop(active) {
    border-style: solid none;
    border-width: 1px;
    border-color: $drop_target_color;

    &.after { border-top-style: none; }

    &.before { border-bottom-style: none; }
  }

  > header > button {
    padding-left: 4px;
    padding-right: 4px;
    border-bottom: 1px solid $border_color;
  }

  &.progressbar { // progress bar in treeviews
    &, &:selected {
      background-color: var(--accent-bg-color);
      color: var(--accent-fg-color);
    }

    box-shadow: none;
  }

  &.trough { // progress bar trough in treeviews
    background-color: color-mix(in srgb, currentColor 10%, transparent);
  }

  ~ undershoot.top {
    box-shadow: none;
    background: none;
  }

  acceleditor > label {
    // see tests/testaccel in GTK to test
    background-color: $treeview_selection_opaque;
  }
}

treeview.navigation-sidebar {
  padding: 0;

  &:selected {
    &:focus, & {
      background-color: $selected_color;
    }
  }
}

treeview entry {
  &:focus-within {
    &:dir(rtl), &:dir(ltr) { // specificity bump hack
      background-color: var(--view-bg-color);
      transition-property: color, background;
    }
  }

  &.flat, & {
    border-radius: 0;
    background-image: none;
    background-color: var(--view-bg-color);

    &:focus-within { border-color: var(--accent-color); }
  }
}

treeview spinbutton:not(.vertical) {
  min-height: 0;
  border-style: none;
  border-radius: 0;

  > text {
    min-height: 0;
    padding: 1px 2px;
  }
}

/********************
 * GtkShortcutLabel *
 ********************/

// shortcut window keys
shortcut {
  border-spacing: 6px;
  border-radius: 6px;
  @include focus-ring($outer: true, $offset: 4px);

  > .keycap {
    min-width: 20px;
    min-height: 25px;
    padding: 2px 6px;

    background: color-mix(in srgb, currentColor 10%, transparent);
    box-shadow: inset 0 -2px var(--card-shade-color);

    @media (prefers-contrast: more) {
      box-shadow: inset 0 -2px var(--card-shade-color), 0 0 0 1px var(--border-color);
    }

    border-radius: 6px;
    font-size: smaller;
  }
}

/**********************
 * GtkShortcutsWindow *
 **********************/

shortcuts-section {
  margin: 20px;
}

.shortcuts-search-results {
  margin: 20px;
  border-spacing: 24px;
}

shortcuts-section stackswitcher.circular {
  border-spacing: 12px;

  > button.circular,
  > button.text-button.circular {
    min-width: 32px;
    min-height: 32px;
    padding: 0;
  }
}

window.shortcuts:not(.ssd-frame) {
  headerbar.titlebar {
    @extend .flat;
    @extend %headerbar-shrunk;

    > windowhandle {
      padding-top: 3px;
    }
  }

  searchbar {
    @extend %searchbar-flat;
    @extend %searchbar-shrunk;

    background: none;
  }
}

// The following styles are deprecated in libadwaita and should be removed in 2.x

/* Transition shadows */

flap,
leaflet {
  @include transition-shadows();
}

// Deprecated: use .boxed-list instead
list.content {
  @extend .boxed-list;
}

// Deprecated: use .navigation-sidebar instead
.sidebar {
  &:not(separator) {
    &:dir(ltr),
    &.left,
    &.left:dir(rtl) {
      border-right: 1px solid $border_color;
      border-left-style: none;
    }

    &:dir(rtl),
    &.right {
      border-left: 1px solid $border_color;
      border-right-style: none;
    }
  }

  listview.view,
  list {
    background-color: transparent;
    color: inherit;
  }

  paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
}

// Deprecated: use .title-1
.large-title {
  font-weight: 300;
  font-size: 24pt;
}

// Deprecated: use AdwToolbarView

headerbar.flat {
  @extend %headerbar-flat;
}

/*********************
 * App Notifications *
 *********************/

// Deprecated: Use AdwToast

.app-notification {
  @extend %osd;

  padding: 10px;
  border-spacing: 10px;
  border-radius: 0 0 $button_radius + 6px $button_radius + 6px;
  background-image: linear-gradient(to bottom, RGB(0 0 0 / 20%), transparent 2px);
  background-clip: padding-box;

  border { border: none; }
}

// Deprecated: Use .dimmed

.dim-label {
  @extend .dimmed;
}
