@use "sass:color";
@use "../../../theme";
@use "../../../theme-color";
@use "../../../shadow";
@use "../../../color-palette";
@use "../common";

/**
 * Tilix
 */

overlay > revealer {
  &.left > scrolledwindow.frame,
  &.right > scrolledwindow.frame {
    border-style: none;
    box-shadow: shadow.$z16;
  }

  &.left > scrolledwindow.frame {
    margin-right: 32px;
  }

  &.right > scrolledwindow.frame {
    margin-left: 32px;
  }
}

.terminix-session-sidebar, // for backward compatibility
.tilix-session-sidebar {
  background-image: image(theme-color.$surface-z8);
}

.terminal-titlebar button {
  border-radius: 0;
}

button.image-button.session-new-button {
  min-width: theme.$medium-size - 4px;
}

// Remove extra padding
notebook.tilix-background tab > box > stack {
  margin: -6px;
}

button.flat.tilix-small-button {
  // NOTE: padding is hard-coded with:
  // padding: 2px 4px;
  min-height: theme.$small-size - 2px * 2;
  min-width: theme.$small-size - 4px * 2;
}

/**
 * Terminator
 */

.terminator-terminal-window {
  paned > separator {
    background-color: theme-color.$surface-z0;
  }

  // this should be fixed by the upstream
  notebook.frame {
    border-style: none;
    background-color: transparent;
  }
}

/**
 * Ubiquity
 */

#live_installer .menubar progressbar trough {
  border-radius: 4px; // Adjust to hard-coded progress border-radius
  background-color: theme-color.disabled-stroke(theme-color.$on-titlebar);
}

#live_installer #partition_container {
  color: black;
}

/**
 * Eclipse
 */

window.background > box.vertical > scrolledwindow > widget toolbar {
  padding: 2px;

  separator,
  button {
    margin: 2px;
  }

  button {
    border-radius: theme.$corner-radius;
  }
}

/**
 * FileZilla
 */

window.background > box.vertical > widget > widget > widget > widget > widget > widget > widget > scrolledwindow > widget {
  > entry {
    all: unset;
    padding: 5px;
    box-shadow: inset 0 0 0 1px theme-color.$selected-overlay;
    background-color: theme-color.$surface-z1;
  }

  > widget > entry {
    all: unset;
    padding: 0 3px 1px;
    box-shadow: inset 0 0 0 1px theme-color.$selected-overlay;
    background-color: theme-color.$surface-z1;
  }
}

/**
 * Chromium
 */

window.background.chromium {
  background-color: theme-color.$surface-z8;

  // FIXME: There is no way to change the color of the toolbar buttons
  toolbar button {
    // color: hint($on-surface);
  }

  // toolbar's border-bottom refers to button's border
  // FIXME: Chrome's button border ignores theme's alpha value :(
  entry,
  > button {
    border: 1px solid theme-color.stroke(theme-color.$on-surface);
  }

  > button {
    color: theme-color.$primary;

    // Source: https://github.com/heldplayer/materia-theme-custom/commit/93af85f1c775745e46f92673bc55edf39b179579
    $this-border-color: theme-color.stroke(theme-color.$on-surface);
    border-color: color.mix(rgba($this-border-color, 1), theme-color.$surface-z8, color.alpha($this-border-color) * 100%);

    &:disabled {
      color: theme-color.disabled-hint(theme-color.$on-surface);
    }
  }

  menubar,
  headerbar {
    color: theme-color.hint(theme-color.$on-titlebar);
  }

  // Workaround for non-animatable buttons in headerbar
  headerbar button:active {
    background-color: theme-color.pressed-overlay(theme-color.$on-titlebar);
  }

  // For text field
  textview.view {
    background-color: transparent;
  }

  // For prominent button, starred icon, etc.
  treeview.view.cell:selected:focus {
    background-color: theme-color.$primary;
    color: theme-color.$on-primary;
  }

  // For table header
  treeview.view button {
    border: 1px solid theme-color.stroke(theme-color.$on-surface);
    background-color: theme-color.$surface-z1; // FIXME: This should not be necessary
    // color: hint($on-surface);
  }
}

tooltip.background.chromium {
  background-color: rgba(theme-color.$tooltip, 1);
}

/**
 * Firefox
 */

#MozillaGtkWidget {
  > widget {
    // For popover, entry in toolbar, etc.
    text {
      background-color: theme-color.$surface-z8;
    }

    // For selection, active tab indicator, etc.
    text:selected {
      // Use traditional selection style as workaround
      background-color: theme-color.$primary;
      color: theme-color.$on-primary;
    }

    // For separators in bookmark toolbar
    > separator {
      color: theme-color.divider(theme-color.$on-surface);
    }

    // avoid black border
    > scrollbar {
      // background-clip: border-box;
    }

    // Emphasize toolbar's border-bottom
    > frame > border {
      // FIXME: On Wayland, translucent colors don't work well here.
      // See: https://github.com/nana-4/materia-theme/issues/467
      border-color: theme-color.opacify(theme-color.stroke(theme-color.$on-surface), theme-color.$surface-z0);
    }

    > entry,
    > button > button {
      border: 1px solid theme-color.stroke(theme-color.$on-surface);
      border-radius: theme.$corner-radius;
      box-shadow: none;

      &:disabled {
        border-color: theme-color.disabled-stroke(theme-color.$on-surface);
      }
    }

    > entry {
      min-height: 32px - 2px;
      background-color: theme-color.$surface-z1;

      &:focus {
        border-color: theme-color.$primary;
        box-shadow: inset 0 0 0 1px theme-color.$primary;
      }

      &:disabled {
        background-color: theme-color.$surface-z1;
      }
    }

    > button > button {
      padding: 4px 8px;

      &:active {
        background-size: 1000% 1000%;
      }
    }

    // use 16px assets for hard-coded sizing
    > checkbutton > check {
      @extend %small_check;
    }

    > radiobutton > radio {
      @extend %small_radio;
    }

    > checkbutton > check,
    > radiobutton > radio {
      margin: 0;
      padding: 0;
    }

    // make check/radio visible regardless of whether the background is bright or dark
    > checkbutton > check:not(:checked):not(:indeterminate),
    > radiobutton > radio:not(:checked):not(:indeterminate) {
      color: color-palette.$grey-600;

      &:disabled {
        color: rgba(color-palette.$grey-600, .5);
      }
    }
  }

  // remove ugly border around the menus
  menu {
    // FIXME: The ugly border is still needed, since the menu doesn't
    // draw its drop shadow in some environments. See:
    // https://github.com/nana-4/materia-theme/issues/462

    // border: none;
  }

  // Workaround: Firefox doesn't properly read color from
  // menuitem:disabled, but from menuitem label:disabled.
  menuitem label:disabled {
    color: theme-color.disabled(theme-color.$on-surface);
  }
}

// for backward compatibility
#MozillaGtkWidget {
  > widget {
    > menubar {
      color: theme-color.hint(theme-color.$on-titlebar);

      &:hover {
        color: theme-color.$on-titlebar;
      }

      &:disabled {
        color: theme-color.disabled-hint(theme-color.$on-titlebar);
      }
    }

    > frame {
      color: theme-color.stroke(theme-color.$on-surface);
    }
  }

  menu > separator {
    color: theme-color.divider(theme-color.$on-surface);
  }
}

/**
 * Inkscape
 */

#ToolboxCommon {
  > #AuxToolbox {
    #StyleSwatch {
      font-size: smaller;
    }

    #Kludge {
      padding: 0;
    }

    spinbutton,
    entry {
      min-height: 32px;
    }

    button:not(.up):not(.down) {
      min-height: 24px;
      min-width: 16px;
      padding: 4px 8px;
      border-radius: theme.$corner-radius;
    }

    spinbutton button {
      border-width: 4px;
    }
  }

  > toolbar.vertical {
    margin-top: -4px;

    button {
      min-height: 24px;
      min-width: 24px;
      padding: 4px;
      border-radius: theme.$corner-radius;
    }
  }
}

#CanvasTable {
  button {
    min-height: 16px;
    min-width: 16px;
    padding: 0;
    border-radius: 0;
    @extend %button-flat-activatable;
  }

  #HorizontalScrollbar {
    border-top: 1px solid theme-color.divider(theme-color.$on-surface);
  }

  #VerticalScrollbar {
    &:dir(ltr) {
      border-left: 1px solid theme-color.divider(theme-color.$on-surface);
    }

    &:dir(rtl) {
      border-right: 1px solid theme-color.divider(theme-color.$on-surface);
    }
  }
}

#Canvas_and_Dock {
  frame > border {
    border: none;
    background-color: transparent;
  }

  // each canvases' titlebar
  widget > widget {
    > button.flat {
      min-height: 16px;
      min-width: 16px;
      padding: 4px;
    }

    > box.horizontal image {
      padding: 4px;
    }
  }

  // vertical dock buttons
  box.horizontal > box.vertical > button.flat {
    min-height: 16px;
    min-width: 24px;
    padding: 8px 4px;
  }
}

/**
 * Synapse
 */

box.vertical > widget > widget:selected {
  background-color: theme-color.$selected-overlay;
}
