// Custom added styles

// Checkerboard for thumbnails with transparent areas
%checkerboard {
  background-position: 0px 0px, 10px 10px;
  background-size: 20px 20px;
  background-image: linear-gradient(
    45deg, $borders_color 25%,
    transparent 25%,
    transparent 75%,
    $borders_color 75%,
    $borders_color 100%
  ),
  linear-gradient(
    45deg, $borders_color 25%,
    $base_color 25%,
    $base_color 75%,
    $borders_color 75%,
    $borders_color 100%
  );
}

// Trying to mimic the headerbar button colors from the libadwaita theme when used in gtk4-widget-factory
%colored_buttons {
  @include button(normal, $headerbar_bg_color, $headerbar_fg_color);
  &:backdrop {
    @include button(backdrop, gtkmix(currentColor, $headerbar_backdrop_color, 3%), $backdrop_headerbar_fg);
  }

  &:hover {
    @if $variant == 'light' {
      @include button(hover, gtkmix(currentColor, $headerbar_bg_color, 0.3%), $headerbar_fg_color);
    }
    @else {
      @include button(hover, gtkmix(currentColor, $headerbar_bg_color, 0.7%), $headerbar_fg_color);
    }
    &:backdrop {
      @include button(backdrop, gtkmix(currentColor, $headerbar_backdrop_color, 12%), $backdrop_headerbar_fg);
    }
  }

  &:active, &:checked {
    @if $variant == 'light' {
      @include button(active, $headerbar_bg_color, $headerbar_fg_color);
      &:hover {
        @include button(active, gtkmix(currentColor, $headerbar_bg_color, 0.3%), $headerbar_fg_color);
      }
    }
    @else {
      @include button(active, gtkmix(currentColor, $headerbar_bg_color, 0.3%), $headerbar_fg_color);
      &:hover {
        @include button(active, gtkmix(currentColor, $headerbar_bg_color, 1%), $headerbar_fg_color);
      }
    }
    &:backdrop {
      @if $variant == 'light' {
        @include button(normal, gtkmix(currentColor, $headerbar_backdrop_color, 12%), $backdrop_headerbar_fg);
      }
      @else {
        @include button(normal, gtkmix(currentColor, $headerbar_backdrop_color, 11%), $backdrop_headerbar_fg);
      }
    }
  }

  &:disabled {
    @include button(insensitive, $headerbar_bg_color, $disabled_headerbar_fg);
  }

  &:backdrop:disabled {
    @include button(backdrop-insensitive, $headerbar_backdrop_color, $backdrop_headerbar_fg);
  }

  &.default:not(:backdrop):not(.suggested-action):not(.destructive-action) {
    @include button(normal, $headerbar_bg_color, $headerbar_fg_color);
  }

  &.flat:not(:hover):not(:active) { @include button(undecorated); }

  &.suggested-action, &.text-button.suggested-action { @extend %suggested_buttons; }
  &.destructive-action, &.text-button.destructive-action { @extend %destructive_buttons; }
}

%headerbar_buttons {
  // The normal state is set where it's needed. Usually undecorated.
  &:hover {
    @include button(normal, gtkmix(currentColor, $headerbar_bg_color, -3%), $headerbar_fg_color);

    &:backdrop {
      @include button(backdrop, gtkmix(currentColor, $headerbar_backdrop_color, -1%), $backdrop_headerbar_fg);
    }
  }

  &:active, &:checked {
    @if $variant == 'light' {
      @include button(normal, $headerbar_bg_color, $headerbar_fg_color);
      &:hover {
        @include button(normal, gtkmix(currentColor, $headerbar_bg_color, 3%), $headerbar_fg_color);
      }
    }
    @else {
      @include button(normal, $headerbar_bg_color, $headerbar_fg_color);
      &:hover {
        @include button(normal, gtkmix(currentColor, $headerbar_bg_color, 3.7%), $headerbar_fg_color);
      }
    }
    &:backdrop {
      @include button(backdrop, $headerbar_backdrop_color, $backdrop_headerbar_fg);
    }
  }

  &.default:not(:backdrop):not(.suggested-action):not(.destructive-action) {
    @include button(normal, $headerbar_bg_color, $headerbar_fg_color);
  }

  &.flat:not(:hover):not(:active) { @include button(undecorated); }

  &.suggested-action, &.text-button.suggested-action { @extend %suggested_buttons; }
  &.destructive-action, &.text-button.destructive-action { @extend %destructive_buttons; }
}

%suggested_buttons {
  @include button(normal, $suggested_bg_color, $accent_fg_color);
  &:hover {
    @include button(hover, $suggested_bg_color, $accent_fg_color);
  }

  &:active, &:checked {
    @include button(active, gtkalpha($suggested_bg_color, 0.5), $accent_fg_color);
  }

  &:backdrop, &:backdrop:hover {
    @include button(backdrop, gtkalpha($suggested_bg_color, 0.5), $accent_fg_color);
  }

  &:disabled {
    @include button(insensitive, $headerbar_bg_color, $fg_color);
    &:backdrop { @include button(backdrop-insensitive, $bg_color, $backdrop_insensitive_color); }
  }
}

%destructive_buttons {
  @include button(normal, $destructive_bg_color, $destructive_fg_color);
  &:hover {
    @include button(normal, $destructive_bg_color, $destructive_fg_color);
  }

  &:active, &:checked {
    @include button(active, gtkalpha($destructive_bg_color, 0.5), $destructive_fg_color);
  }

  &:backdrop, &:backdrop:hover {
    @include button(backdrop, gtkalpha($destructive_bg_color, 0.5), $destructive_fg_color);
  }

  &:disabled {
    @include button(insensitive, $headerbar_bg_color, $fg_color);
    &:backdrop { @include button(backdrop-insensitive, $bg_color, $backdrop_insensitive_color); }
  }
}

// headerbar stuff
headerbar {
  box-shadow: 0 1px if($variant == 'light', gtkalpha($headerbar_shade_color, .3), gtkalpha($headerbar_shade_color, .1));
}

headerbar, .titlebar {
  // Text colors for gtk named color support (except backdrop and disabled)
  &:not(.selection-mode) {
    &,
    entry {
      color: $headerbar_fg_color;
    }

    &:backdrop,
    entry:backdrop {
      color: $disabled_headerbar_fg;
    }

    entry:disabled {
      color: $disabled_headerbar_fg;
    }

    button {
      &:not(.suggested-action):not(.destructive-action) {
        color: $headerbar_fg_color;
        &:backdrop { color: $backdrop_headerbar_fg; }
        &:disabled { color: $disabled_headerbar_fg; }
      }
    }

    switch image { color: transparent; }
  }

  button:not(.titlebutton) {
    &, &:backdrop { @include button(undecorated); }
    @extend %headerbar_buttons;
  }

  // Text buttons
  button.text-button {
    &:not(.suggested-action):not(.destructive-action):not(:disabled) { @extend %colored_buttons; }
  }

  // Linked button borders
  .linked.raised button:not(:only-child),
  .linked button:not(:only-child),
  & > .stack-switcher.linked > button:not(:only-child) {
    @extend %linked;
    &:not(:first-child) { border-left-color: $border_color; }
    &:not(:last-child) { border-right-color: $border_color; }
    &:first-child { border-left-color: transparent; }
    &:last-child { border-right-color: transparent; }

    // Trick to get a linked right border on checked buttons, and no left border on the next button
    &:first-child:not(:backdrop),
    &:not(:last-child):not(:backdrop) {
      &:checked, &:active {
        box-shadow: inset -1px 0 $border_color;
        + button { border-left-color: transparent; }
      }
    }
  }

  // Linked color fills
  // In libadwaita the linked buttons appear on hover, so it would be better to have ".linked:hover button" instead, but sadly it is not possible.
  .linked.raised button,
  .linked button:not(:only-child),
  & > .stack-switcher.linked > button { @extend %colored_buttons; }

  // hdy viewswitcher buttons (weather, system monitor, etc.)
  viewswitcher button.radio:checked {
    @extend %headerbar_buttons;
  }

  // Selection mode
  &.selection-mode {
    button {
      &, &.text-button:not(.suggested-action):not(.destructive-action):not(:disabled) {
        @extend %suggested_buttons;
      }
      &:hover:backdrop {
        @include button(backdrop, gtkalpha($suggested_bg_color, 0.5), $accent_fg_color);
      }
    }
  }

  // Entries
  entry {
    min-height: 32px; // Evens out the height for the top and bottom borders which adds 2px
    @include button(normal, $headerbar_bg_color, $headerbar_fg_color);
    &:backdrop {
      @include button(backdrop, $headerbar_backdrop_color, $backdrop_headerbar_fg);
    }
    &:disabled {
      @include button(insensitive, $headerbar_bg_color, $disabled_headerbar_fg);
    }
    &:disabled:backdrop {
      @include button(insensitive, $headerbar_backdrop_color, $backdrop_headerbar_fg);
    }

    image { // icons inside the entry
      &.left { margin-right: 6px; }
      &.right { margin-left: 6px; }

      // entry icons colors
      color: gtkmix($fg_color, $base_color, 80%);
      &:hover { color: $headerbar_fg_color; }
      &:active { color: $selected_bg_color; }
      &:backdrop { color: gtkmix($backdrop_fg_color, $backdrop_base_color, 80%); }
    }

    selection { @extend %selected_items; }

    // entry error and warning style
    @each $e_type, $e_color in (error, $error_bg_color),
                               (warning, $warning_bg_color) {
      &.#{$e_type} {
        color: $e_color;
        border-color: entry_focus_border($e_color);

        &:focus { @include entry(focus, $e_color); }

        selection { background-color: $e_color; }
      }
    }

    &.flat {
      &:focus, &:backdrop, &:disabled, &:backdrop:disabled, & {
        min-height: 0;
        padding: 2px;
        background-color: transparent;
        border-color: transparent;
        border-radius: 0;
      }
    }

    &:drop(active) {
      &:focus, & {
        border-color: $drop_target_color;
        box-shadow: inset 0 0 0 1px $drop_target_color;
      }
    }

    progress {
      margin: 2px -6px;
      background-color: transparent;
      background-image: none;
      border-radius: 0;
      border-width: 0 0 2px;
      border-color: $progress_bg_color;
      border-style: solid;
      box-shadow: none;

      &:backdrop { background-color: transparent; }
    }
  }

  .linked entry:not(:first-child) {
    border-left-color: $border_color;
    &:backdrop { border-left-color: $border_color; }
  }
  .linked entry ~ .image-button { @extend %colored_buttons; }

  // switches
  switch {
    &:backdrop {
      color: $backdrop_fg_color;
      border-color: $backdrop_borders_color;
      background-color: $backdrop_dark_fill;
      text-shadow: none;
      transition: $backdrop_transition;

      &:checked {
        @if $variant == 'light' { color: $backdrop_bg_color; }
        background-color: gtkalpha($checkradio_bg_color, 0.5);
        &:disabled {
          background-color: gtkalpha($checkradio_bg_color, 0.3);
        }
      }

      &:disabled {
        @include button(insensitive);
      }

      slider {
        transition: $backdrop_transition;
        background-color: gtkmix($base_color, $slider_color, 30%);
      }

      &:checked > slider { background-color: gtkmix($base_color, $slider_color, 30%); }

      &:disabled slider { background-color: gtkmix($base_color, $slider_color, 60%); }
    }

    &:disabled {
      background-color: gtkshade($backdrop_dark_fill, 0.96);
      &:backdrop { background-color: $backdrop_dark_fill; }
    }
  }

  // better animation when switching from backdrop
  &:not(:backdrop) {
    transition: 50ms ease-in;
    transition-property: background-color, background-image, box-shadow, border-color, color, text-shadow;
  }

  // Balance out the titlebutton margin
  .right {
    margin-left: -4px;
    separator { min-width: 0; }
  }
  .left {
    margin-right: -4px;
    separator { min-width: 0; }
  }
}

// Different button color on brighter elements like lists and popovers
.content list,
list.content,
list.view.frame {
  button, > row:not(:selected):hover button {
    @include button(normal, $card_bg_color, $card_fg_color);
    &.flat:not(:hover):not(:active) { @include button(undecorated); }
    &:hover { @include button(hover, $card_bg_color, $card_fg_color); }
    &:active, &:checked { @include button(active, $card_bg_color, $card_fg_color); }
    &:disabled {
      @include button(normal, $card_bg_color, $disabled_card_fg);
    }

    &.suggested-action { @extend %suggested_buttons; }
    &.destructive-action { @extend %destructive_buttons; }
  }

  entry {
    @include button(normal, $card_bg_color, $card_fg_color);
    &:disabled {
      @include button(normal, $card_bg_color, $disabled_card_fg);
    }
  }
}

popover.background {
  button {
    @include button(normal, $popover_bg_color, $popover_fg_color);
    &.flat:not(:hover):not(:active) { @include button(undecorated); }
    &:hover { @include button(hover, $popover_bg_color, $popover_fg_color); }
    &:active, &:checked { @include button(active, $popover_bg_color, $popover_fg_color); }
    &:disabled {
      @include button(normal, $popover_bg_color, $disabled_popover_fg);
    }

    &.suggested-action { @extend %suggested_buttons; }
    &.destructive-action { @extend %destructive_buttons; }
  }

  entry {
    @include button(normal, $popover_bg_color, $popover_fg_color);
    &:disabled {
      @include button(normal, $popover_bg_color, $disabled_popover_fg);
    }
  }
}

// Even out toggle button padding to make them more square
button.toggle:not(.image-button) {
  padding-left: 8px;
  padding-right: 8px;
}

// Font fixes when button text is bold
.flat.popup:not(.title) {
  font-weight: normal;
}

// Smaller text in statusbars
statusbar {
  font-size: small;
}

// scrolled window list rows
scrolledwindow list {
  &:not(.content) {
    padding: 6px 0;
  }
  row {
    margin: 0 6px;
    border-radius: $button_radius;
  }
  separator.horizontal {
    margin: 6px;
  }
}

// Fix wrong border-radius on hdy spinbutton entries
list.content .horizontal spinbutton entry {
  border-top-left-radius: $button_radius;
  border-bottom-left-radius: $button_radius;
}

// Non "content" lists
list.view.frame {
  border-radius: $card_radius;
  &, &:backdrop { background-color: $card_bg_color; }
}

// Legacy application titlebuttons
.ssd .titlebar {
  border-width: 0;
  padding: 0px 4px;
  min-height: 36px;
  border-bottom: 1px solid $headerbar_shade_color;
  //&:backdrop { border-color: $backdrop_borders_color; }

  &.default-decoration button.titlebutton {
    background-color: $titlebutton_normal;
    min-height: 24px;
    min-width: 24px;
    margin: 0 4px 0 4px;
    padding: 0;
    &:hover { background-color: $titlebutton_normal_hover; }
    &:hover:active, &:active { background-color: $titlebutton_normal_active; }
    &:backdrop { background: $titlebutton_backdrop; }
    &:backdrop:hover { background: $titlebutton_backdrop_hover; }
  }
}

.default-decoration .title {
  color: $headerbar_fg_color;
  &:backdrop { color: $backdrop_headerbar_fg; }
}

// Tree views
treeview.view:not(:backdrop):not(:selected):hover {
  background-color: $view_hover_color;
}

// Preferences window
// In nautilus preferences there is no padding below the last list
.preferences scrolledwindow > .frame > clamp {
  &.large, &.medium, &.small { padding-bottom: 30px; }
}

// Linked osd buttons, like in totem
.osd .linked > button { border-color: transparent; }

// Toolbars
.primary-toolbar, .toolbar {
  background-color: $bg_color;
  &:backdrop { background-color: $backdrop_bg_color; }
}

// Popover menuitems
popover.background {
  modelbutton.flat {
    padding-left: 16px;
    padding-right: 16px;
  }

  modelbutton.flat,
  .menuitem.button.flat {
    color: $popover_fg_color;
    &:disabled label {
      color: gtkmix($popover_fg_color, $popover_bg_color, 50%);
    }
    &:backdrop:hover {
      background-color: $view_hover_color;
    }
  }
}

// Mimic libadwaita popover padding
popover.menu > stack {
  margin: -6px;
}
