# vim:set ft=gtkrc ts=2 sw=2 sts=2 ai et:
#
# This is the main theme file, handling all the default widgets and theme
# properties. Since GTK 2 is old, we need to overcome some of its limitations,
# which is also mostly done in this file. Sadly not all of them can be overcome
# so there will always be a visible difference between the GTK 2 and 3 theme.

style "default" {
  xthickness = 1
  ythickness = 1

  ####################
  # Style Properties #
  ####################

  GtkWidget::focus-padding      = 0
  GtkWidget::focus-line-width   = 2
  GtkWidget::focus-line-pattern = "\2\1"

  GtkToolbar::space-size       = 5 # 1 + 2*2 (separator + margins)
  GtkToolbar::internal-padding = 2
  GtkToolButton::icon-spacing  = 4

  GtkWidget::tooltip-radius    = 4
  GtkWidget::tooltip-alpha     = 230
  GtkWidget::new-tooltip-style = 1 #for compatibility

  GtkWidget::link-color              = @link_color
  GtkWidget::visited-link-color      = @visited_link_color
  GnomeHRef::link_color              = @link_color
  GtkHTML::link-color                = @link_color
  GtkHTML::vlink-color               = @visited_link_color
  GtkIMHtml::hyperlink-color         = @link_color
  GtkIMHtml::hyperlink-visited-color = @visited_link_color

  GtkSeparatorMenuItem::horizontal-padding = 0
  GtkSeparatorMenuItem::wide-separators    = 1
  GtkSeparatorMenuItem::separator-height   = 3

  GtkButton::child-displacement-y = 0

  GtkButton::default-border         = {0, 0, 0, 0}
  GtkButton::default-outside-border = {0, 0, 0, 0}
  GtkButton::inner-border           = {4, 4, 4, 4}

  GtkEntry::state-hint   = 1
  GtkEntry::inner-border = {4, 4, 4, 4}

  GtkPaned::handle-size  = 8
  GtkHPaned::handle-size = 8
  GtkVPaned::handle-size = 8

  GtkScrollbar::trough-border = 0
  GtkRange::trough-border     = 0
  GtkRange::slider-width      = 17
  GtkRange::stepper-size      = 0
  GtkRange::activate-slider   = 1

  GtkScrollbar::activate-slider              = 1
  GtkScrollbar::stepper-size                 = 0
  GtkScrollbar::has-backward-stepper         = 0
  GtkScrollbar::has-forward-stepper          = 0
  GtkScrollbar::min-slider-length            = 32 # 24 + 2*4 (margins)
  GtkScrolledWindow::scrollbar-spacing       = 0
  GtkScrolledWindow::scrollbars-within-bevel = 1

  GtkScale::slider_length       = 24
  GtkScale::slider_width        = 24
  GtkScale::trough-side-details = 1

  GtkProgressBar::min-horizontal-bar-height = 4
  GtkProgressBar::min-vertical-bar-width    = 4
  GtkProgressBar::xspacing                  = 4
  GtkProgressBar::yspacing                  = 4

  GtkStatusbar::shadow_type    = GTK_SHADOW_NONE
  GtkSpinButton::shadow_type   = GTK_SHADOW_NONE
  GtkMenuBar::shadow-type      = GTK_SHADOW_NONE
  GtkToolbar::shadow-type      = GTK_SHADOW_NONE
  # TODO: find out what this comment means:
  # ( every window is misaligned for the sake of menus ):
  GtkMenuBar::internal-padding = 0
  GtkMenu::horizontal-padding  = 0
  GtkMenu::vertical-padding    = 4
  GtkMenu::double-arrows       = 0
  GtkMenuItem::arrow-scaling   = 1
  GtkMenuItem::toggle-spacing  = 12

  GtkCheckButton::indicator-size    = 24
  GtkCheckButton::indicator_spacing = 2
  GtkOptionMenu::indicator_spacing  = {8, 8, 4, 4}

  GtkTreeView::expander-size        = 16
  GtkTreeView::vertical-separator   = 0
  GtkTreeView::horizontal-separator = 4
  GtkTreeView::allow-rules          = 0
  # Set this because some apps read it
  GtkTreeView::odd-row-color        = @base_color
  GtkTreeView::even-row-color       = @base_color

  GtkExpander::expander-size = 16

  GtkNotebook::tab-overlap = 0

  ##########
  # Colors #
  ##########

  bg[NORMAL]      = @bg_color
  bg[PRELIGHT]    = @bg_color
  bg[SELECTED]    = mix (0.24, @selected_bg_color, @bg_color)
  bg[INSENSITIVE] = @bg_color
  bg[ACTIVE]      = @bg_color

  fg[NORMAL]      = @fg_color
  fg[PRELIGHT]    = @fg_color
  fg[SELECTED]    = @fg_color
  fg[INSENSITIVE] = mix (0.5, @fg_color, @bg_color)
  fg[ACTIVE]      = @fg_color

  text[NORMAL]      = @text_color
  text[PRELIGHT]    = @text_color
  text[SELECTED]    = @text_color
  text[INSENSITIVE] = mix (0.5, @text_color, @base_color)
  text[ACTIVE]      = @text_color

  base[NORMAL]      = @base_color
  base[PRELIGHT]    = mix (0.08, @text_color, @base_color)
  base[SELECTED]    = mix (0.24, @selected_bg_color, @base_color)
  base[INSENSITIVE] = mix (0.5, @base_color, @bg_color)
  base[ACTIVE]      = mix (0.24, @selected_bg_color, @base_color)

  # For succinctness, all reasonable pixmap options remain here

  # Draw frame around menu in a non-compositied environment
  # This needs to go before pixmap because we need to override some stuff
  engine "adwaita" {}

  engine "pixmap" {

    #################
    # Check Buttons #
    #################

    image {
      function        = CHECK
      state           = NORMAL
      shadow          = OUT
      overlay_file    = "assets/checkbox-unchecked.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = PRELIGHT
      shadow          = OUT
      overlay_file    = "assets/checkbox-unchecked-hover.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = ACTIVE
      shadow          = OUT
      overlay_file    = "assets/checkbox-unchecked-active.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = SELECTED
      shadow          = OUT
      overlay_file    = "assets/checkbox-unchecked.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = INSENSITIVE
      shadow          = OUT
      overlay_file    = "assets/checkbox-unchecked-disabled.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = NORMAL
      shadow          = IN
      overlay_file    = "assets/checkbox-checked.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = PRELIGHT
      shadow          = IN
      overlay_file    = "assets/checkbox-checked-hover.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = ACTIVE
      shadow          = IN
      overlay_file    = "assets/checkbox-checked-active.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = SELECTED
      shadow          = IN
      overlay_file    = "assets/checkbox-checked.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = INSENSITIVE
      shadow          = IN
      overlay_file    = "assets/checkbox-checked-disabled.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = NORMAL
      shadow          = ETCHED_IN
      overlay_file    = "assets/checkbox-mixed.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = PRELIGHT
      shadow          = ETCHED_IN
      overlay_file    = "assets/checkbox-mixed-hover.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = ACTIVE
      shadow          = ETCHED_IN
      overlay_file    = "assets/checkbox-mixed-active.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = SELECTED
      shadow          = ETCHED_IN
      overlay_file    = "assets/checkbox-mixed.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = INSENSITIVE
      shadow          = ETCHED_IN
      overlay_file    = "assets/checkbox-mixed-disabled.png"
      overlay_stretch = FALSE
    }

    #################
    # Radio Buttons #
    #################

    image {
      function        = OPTION
      state           = NORMAL
      shadow          = OUT
      overlay_file    = "assets/radio-unchecked.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = PRELIGHT
      shadow          = OUT
      overlay_file    = "assets/radio-unchecked-hover.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = ACTIVE
      shadow          = OUT
      overlay_file    = "assets/radio-unchecked-active.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = SELECTED
      shadow          = OUT
      overlay_file    = "assets/radio-unchecked.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = INSENSITIVE
      shadow          = OUT
      overlay_file    = "assets/radio-unchecked-disabled.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = NORMAL
      shadow          = IN
      overlay_file    = "assets/radio-checked.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = PRELIGHT
      shadow          = IN
      overlay_file    = "assets/radio-checked-hover.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = ACTIVE
      shadow          = IN
      overlay_file    = "assets/radio-checked-active.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = SELECTED
      shadow          = IN
      overlay_file    = "assets/radio-checked.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = INSENSITIVE
      shadow          = IN
      overlay_file    = "assets/radio-checked-disabled.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = NORMAL
      shadow          = ETCHED_IN
      overlay_file    = "assets/radio-mixed.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = PRELIGHT
      shadow          = ETCHED_IN
      overlay_file    = "assets/radio-mixed-hover.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = ACTIVE
      shadow          = ETCHED_IN
      overlay_file    = "assets/radio-mixed-active.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = SELECTED
      shadow          = ETCHED_IN
      overlay_file    = "assets/radio-mixed.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = INSENSITIVE
      shadow          = ETCHED_IN
      overlay_file    = "assets/radio-mixed-disabled.png"
      overlay_stretch = FALSE
    }

    ##########
    # Arrows #
    ##########

    # Overrides

    # Disable arrows in spinbuttons
    image {
      function = ARROW
      detail   = "spinbutton"
    }

    # Disable arrows for qt in scrollbars

    image {
      function = ARROW
      detail   = "vscrollbar"
    }

    image {
      function = ARROW
      detail   = "hscrollbar"
    }

    # Menu arrows

    image {
      function        = ARROW
      state           = NORMAL
      detail          = "menuitem"
      overlay_file    = "assets/pan-left.png"
      overlay_stretch = FALSE
      arrow_direction = LEFT
    }

    image {
      function        = ARROW
      state           = PRELIGHT
      detail          = "menuitem"
      overlay_file    = "assets/pan-left.png"
      overlay_stretch = FALSE
      arrow_direction = LEFT
    }

    image {
      function        = ARROW
      state           = INSENSITIVE
      detail          = "menuitem"
      overlay_file    = "assets/pan-left-disabled.png"
      overlay_stretch = FALSE
      arrow_direction = LEFT
    }

    image {
      function        = ARROW
      state           = NORMAL
      detail          = "menuitem"
      overlay_file    = "assets/pan-right.png"
      overlay_stretch = FALSE
      arrow_direction = RIGHT
    }

    image {
      function        = ARROW
      state           = PRELIGHT
      detail          = "menuitem"
      overlay_file    = "assets/pan-right.png"
      overlay_stretch = FALSE
      arrow_direction = RIGHT
    }

    image {
      function        = ARROW
      state           = INSENSITIVE
      detail          = "menuitem"
      overlay_file    = "assets/pan-right-disabled.png"
      overlay_stretch = FALSE
      arrow_direction = RIGHT
    }

    image {
      function        = ARROW
      state           = INSENSITIVE
      detail          = "menu_scroll_arrow_up"
      overlay_file    = "assets/pan-up-disabled.png"
      overlay_stretch = FALSE
    }

    image {
      function        = ARROW
      detail          = "menu_scroll_arrow_up"
      overlay_file    = "assets/pan-up.png"
      overlay_stretch = FALSE
    }

    image {
      function        = ARROW
      state           = INSENSITIVE
      detail          = "menu_scroll_arrow_down"
      overlay_file    = "assets/pan-down-disabled.png"
      overlay_stretch = FALSE
    }

    image {
      function        = ARROW
      detail          = "menu_scroll_arrow_down"
      overlay_file    = "assets/pan-down.png"
      overlay_stretch = FALSE
    }

    # Regular arrows

    image {
      function        = ARROW
      state           = NORMAL
      overlay_file    = "assets/pan-up.png"
      overlay_stretch = FALSE
      arrow_direction = UP
    }

    image {
      function        = ARROW
      state           = PRELIGHT
      overlay_file    = "assets/pan-up.png"
      overlay_stretch = FALSE
      arrow_direction = UP
    }

    image {
      function        = ARROW
      state           = ACTIVE
      overlay_file    = "assets/pan-up.png"
      overlay_stretch = FALSE
      arrow_direction = UP
    }

    image {
      function        = ARROW
      state           = INSENSITIVE
      overlay_file    = "assets/pan-up-disabled.png"
      overlay_stretch = FALSE
      arrow_direction = UP
    }

    image {
      function        = ARROW
      state           = NORMAL
      overlay_file    = "assets/pan-down.png"
      overlay_stretch = FALSE
      arrow_direction = DOWN
    }

    image {
      function        = ARROW
      state           = PRELIGHT
      overlay_file    = "assets/pan-down.png"
      overlay_stretch = FALSE
      arrow_direction = DOWN
    }

    image {
      function        = ARROW
      state           = ACTIVE
      overlay_file    = "assets/pan-down.png"
      overlay_stretch = FALSE
      arrow_direction = DOWN
    }

    image {
      function        = ARROW
      state           = INSENSITIVE
      overlay_file    = "assets/pan-down-disabled.png"
      overlay_stretch = FALSE
      arrow_direction = DOWN
    }

    image {
      function        = ARROW
      state           = NORMAL
      overlay_file    = "assets/pan-left.png"
      overlay_stretch = FALSE
      arrow_direction = LEFT
    }

    image {
      function        = ARROW
      state           = PRELIGHT
      overlay_file    = "assets/pan-left.png"
      overlay_stretch = FALSE
      arrow_direction = LEFT
    }

    image {
      function        = ARROW
      state           = ACTIVE
      overlay_file    = "assets/pan-left.png"
      overlay_stretch = FALSE
      arrow_direction = LEFT
    }

    image {
      function        = ARROW
      state           = INSENSITIVE
      overlay_file    = "assets/pan-left-disabled.png"
      overlay_stretch = FALSE
      arrow_direction = LEFT
    }

    image {
      function        = ARROW
      state           = NORMAL
      overlay_file    = "assets/pan-right.png"
      overlay_stretch = FALSE
      arrow_direction = RIGHT
    }

    image {
      function        = ARROW
      state           = PRELIGHT
      overlay_file    = "assets/pan-right.png"
      overlay_stretch = FALSE
      arrow_direction = RIGHT
    }

    image {
      function        = ARROW
      state           = ACTIVE
      overlay_file    = "assets/pan-right.png"
      overlay_stretch = FALSE
      arrow_direction = RIGHT
    }

    image {
      function        = ARROW
      state           = INSENSITIVE
      overlay_file    = "assets/pan-right-disabled.png"
      overlay_stretch = FALSE
      arrow_direction = RIGHT
    }

    ######################
    # Option Menu Arrows #
    ######################

    image {
      function        = TAB
      state           = NORMAL
      overlay_file    = "assets/pan-down.png"
      overlay_stretch = FALSE
    }

    image {
      function        = TAB
      state           = PRELIGHT
      overlay_file    = "assets/pan-down.png"
      overlay_stretch = FALSE
    }

    image {
      function        = TAB
      state           = ACTIVE
      overlay_file    = "assets/pan-down.png"
      overlay_stretch = FALSE
    }

    image {
      function        = TAB
      state           = INSENSITIVE
      overlay_file    = "assets/pan-down-disabled.png"
      overlay_stretch = FALSE
    }

    #########
    # Lines #
    #########

    image {
      function = VLINE
      file     = "assets/border.png"
      border   = {1, 0, 0, 0}
    }

    image {
      function = HLINE
      file     = "assets/border.png"
      border   = {0, 0, 1, 0}
    }

    #########
    # Focus #
    #########

    image {
      function = FOCUS
      file     = "assets/focus.png"
      border   = {5, 5, 5, 5} # Super strange, {4, 4, 4, 4} does not work properly...
      stretch  = TRUE
    }

    ###########
    # Handles #
    ###########

    image {
      function        = HANDLE
      detail          = "handlebox"
      overlay_file    = "assets/handle-vert.png"
      overlay_stretch = FALSE
    }

    image {
      function        = HANDLE
      overlay_file    = "assets/handle-horz.png"
      overlay_stretch = FALSE
      orientation     = HORIZONTAL
    }

    image {
      function        = HANDLE
      overlay_file    = "assets/handle-vert.png"
      overlay_stretch = FALSE
      orientation     = VERTICAL
    }

    image {
      function = RESIZE_GRIP
    }

    #############
    # Expanders #
    #############

    image {
      function       = EXPANDER
      expander_style = EXPANDED
      state          = NORMAL
      file           = "assets/pan-down.png"
    }

    image {
      function       = EXPANDER
      expander_style = EXPANDED
      state          = PRELIGHT
      file           = "assets/pan-down-alt.png"
    }

    image {
      function       = EXPANDER
      expander_style = EXPANDED
      state          = ACTIVE
      file           = "assets/pan-down-alt.png"
    }

    image {
      function       = EXPANDER
      expander_style = EXPANDED
      state          = INSENSITIVE
      file           = "assets/pan-down-disabled.png"
    }

    # LTR

    image {
      function       = EXPANDER
      expander_style = COLLAPSED
      state          = NORMAL
      file           = "assets/pan-right.png"
      direction      = LTR
    }

    image {
      function       = EXPANDER
      expander_style = COLLAPSED
      state          = PRELIGHT
      file           = "assets/pan-right-alt.png"
      direction      = LTR
    }

    image {
      function       = EXPANDER
      expander_style = COLLAPSED
      state          = ACTIVE
      file           = "assets/pan-right-alt.png"
      direction      = LTR
    }

    image {
      function       = EXPANDER
      expander_style = COLLAPSED
      state          = INSENSITIVE
      file           = "assets/pan-right-disabled.png"
      direction      = LTR
    }

    image {
      function       = EXPANDER
      expander_style = SEMI_COLLAPSED
      file           = "assets/pan-right-semi.png"
      direction      = LTR
    }

    image {
      function       = EXPANDER
      expander_style = SEMI_EXPANDED
      file           = "assets/pan-right-semi.png"
      direction      = LTR
    }

    # RTL

    image {
      function       = EXPANDER
      expander_style = COLLAPSED
      state          = NORMAL
      file           = "assets/pan-left.png"
      direction      = RTL
    }

    image {
      function       = EXPANDER
      expander_style = COLLAPSED
      state          = PRELIGHT
      file           = "assets/pan-left-alt.png"
      direction      = RTL
    }

    image {
      function       = EXPANDER
      expander_style = COLLAPSED
      state          = ACTIVE
      file           = "assets/pan-left-alt.png"
      direction      = RTL
    }

    image {
      function       = EXPANDER
      expander_style = COLLAPSED
      state          = INSENSITIVE
      file           = "assets/pan-left-disabled.png"
      direction      = RTL
    }

    image {
      function       = EXPANDER
      expander_style = SEMI_COLLAPSED
      file           = "assets/pan-left-semi.png"
      direction      = RTL
    }

    image {
      function       = EXPANDER
      expander_style = SEMI_EXPANDED
      file           = "assets/pan-left-semi.png"
      direction      = RTL
    }

    #############
    # Notebooks #
    #############

    # Left

    image {
      function = EXTENSION
      state    = NORMAL
      file     = "assets/tab.png"
      border   = {0, 1, 0, 0}
      stretch  = TRUE
      gap_side = RIGHT
    }

    image {
      function = EXTENSION
      gap_side = RIGHT
    }

    # Right

    image {
      function = EXTENSION
      state    = NORMAL
      file     = "assets/tab.png"
      border   = {1, 0, 0, 0}
      stretch  = TRUE
      gap_side = LEFT
    }

    image {
      function = EXTENSION
      gap_side = LEFT
    }

    # Up

    image {
      function = EXTENSION
      state    = NORMAL
      file     = "assets/tab.png"
      border   = {0, 0, 0, 1}
      stretch  = TRUE
      gap_side = BOTTOM
    }

    image {
      function = EXTENSION
      gap_side = BOTTOM
    }

    # Down

    image {
      function = EXTENSION
      state    = NORMAL
      file     = "assets/tab.png"
      border   = {0, 0, 1, 0}
      stretch  = TRUE
      gap_side = TOP
    }

    image {
      function = EXTENSION
      gap_side = TOP
    }

    # Inner frame

    image {
      function   = BOX_GAP
      detail     = "notebook"
      file       = "assets/frame-notebook.png"
      border     = {1, 1, 1, 1}
      stretch    = TRUE
      gap_file   = "assets/tab.png"
      gap_border = {1, 0, 0, 0}
      gap_side   = LEFT
    }

    image {
      function   = BOX_GAP
      detail     = "notebook"
      file       = "assets/frame-notebook.png"
      border     = {1, 1, 1, 1}
      stretch    = TRUE
      gap_file   = "assets/tab.png"
      gap_border = {0, 1, 0, 0}
      gap_side   = RIGHT
    }

    image {
      function   = BOX_GAP
      detail     = "notebook"
      file       = "assets/frame-notebook.png"
      border     = {1, 1, 1, 1}
      stretch    = TRUE
      gap_file   = "assets/tab.png"
      gap_border = {0, 0, 1, 0}
      gap_side   = TOP
    }

    image {
      function   = BOX_GAP
      detail     = "notebook"
      file       = "assets/frame-notebook.png"
      border     = {1, 1, 1, 1}
      stretch    = TRUE
      gap_file   = "assets/tab.png"
      gap_border = {0, 0, 0, 1}
      gap_side   = BOTTOM
    }

    # Standalone frame
    image {
      function = BOX
      detail   = "notebook"
      file     = "assets/frame-notebook.png"
      border   = {1, 1, 1, 1}
      stretch  = TRUE
    }

    ##############
    # Scrollbars #
    ##############

    image {
      function    = BOX
      detail      = "trough"
      file        = "assets/scrollbar-horz-trough.png"
      border      = {0, 0, 1, 0}
      orientation = HORIZONTAL
    }

    image {
      function    = BOX
      detail      = "trough"
      file        = "assets/scrollbar-vert-ltr-trough.png"
      border      = {1, 0, 0, 0}
      orientation = VERTICAL
      direction   = LTR
    }

    image {
      function    = BOX
      detail      = "trough"
      file        = "assets/scrollbar-vert-rtl-trough.png"
      border      = {0, 1, 0, 0}
      orientation = VERTICAL
      direction   = RTL
    }

    # Horizontal sliders

    image {
      function    = SLIDER
      state       = NORMAL
      detail      = "slider"
      file        = "assets/scrollbar-horz-slider.png"
      border      = {8, 8, 9, 8 }
      stretch     = TRUE
      orientation = HORIZONTAL
    }

    image {
      function    = SLIDER
      state       = PRELIGHT
      detail      = "slider"
      file        = "assets/scrollbar-horz-slider-hover.png"
      border      = {8, 8, 9, 8 }
      stretch     = TRUE
      orientation = HORIZONTAL
    }

    image {
      function    = SLIDER
      state       = ACTIVE
      detail      = "slider"
      file        = "assets/scrollbar-horz-slider-active.png"
      border      = {8, 8, 9, 8 }
      stretch     = TRUE
      orientation = HORIZONTAL
    }

    image {
      function    = SLIDER
      state       = INSENSITIVE
      detail      = "slider"
      file        = "assets/scrollbar-horz-slider-disabled.png"
      border      = {8, 8, 9, 8 }
      stretch     = TRUE
      orientation = HORIZONTAL
    }

    # Vertical sliders

    image {
      function    = SLIDER
      state       = NORMAL
      detail      = "slider"
      file        = "assets/scrollbar-vert-ltr-slider.png"
      border      = {9, 8, 8, 8}
      stretch     = TRUE
      orientation = VERTICAL
      direction   = LTR
    }

    image {
      function    = SLIDER
      state       = PRELIGHT
      detail      = "slider"
      file        = "assets/scrollbar-vert-ltr-slider-hover.png"
      border      = {9, 8, 8, 8}
      stretch     = TRUE
      orientation = VERTICAL
      direction   = LTR
    }

    image {
      function    = SLIDER
      state       = ACTIVE
      detail      = "slider"
      file        = "assets/scrollbar-vert-ltr-slider-active.png"
      border      = {9, 8, 8, 8}
      stretch     = TRUE
      orientation = VERTICAL
      direction   = LTR
    }

    image {
      function    = SLIDER
      state       = INSENSITIVE
      detail      = "slider"
      file        = "assets/scrollbar-vert-ltr-slider-disabled.png"
      border      = {9, 8, 8, 8}
      stretch     = TRUE
      orientation = VERTICAL
      direction   = LTR
    }

    # RTL

    image {
      function    = SLIDER
      state       = NORMAL
      detail      = "slider"
      file        = "assets/scrollbar-vert-rtl-slider.png"
      border      = {8, 9, 8, 8}
      stretch     = TRUE
      orientation = VERTICAL
      direction   = RTL
    }

    image {
      function    = SLIDER
      state       = PRELIGHT
      detail      = "slider"
      file        = "assets/scrollbar-vert-rtl-slider-hover.png"
      border      = {8, 9, 8, 8}
      stretch     = TRUE
      orientation = VERTICAL
      direction   = RTL
    }

    image {
      function    = SLIDER
      state       = ACTIVE
      detail      = "slider"
      file        = "assets/scrollbar-vert-rtl-slider-active.png"
      border      = {8, 9, 8, 8}
      stretch     = TRUE
      orientation = VERTICAL
      direction   = RTL
    }

    image {
      function    = SLIDER
      state       = INSENSITIVE
      detail      = "slider"
      file        = "assets/scrollbar-vert-rtl-slider-disabled.png"
      border      = {8, 9, 8, 8}
      stretch     = TRUE
      orientation = VERTICAL
      direction   = RTL
    }

    ##########
    # Scales #
    ##########

    # Troughs, overrided later on. We set them here too because some widgets
    # don't specify their orientation.

    image {
      function    = BOX
      detail      = "trough-upper"
      file        = "assets/scale-horz-trough.png"
      border      = {6, 6, 0, 0}
      stretch     = TRUE
      orientation = HORIZONTAL
    }

    image {
      function    = BOX
      state       = INSENSITIVE
      detail      = "trough-upper"
      file        = "assets/scale-horz-trough-disabled.png"
      border      = {6, 6, 0, 0}
      stretch     = TRUE
      orientation = HORIZONTAL
    }

    image {
      function    = BOX
      detail      = "trough-lower"
      file        = "assets/scale-horz-trough-active.png"
      border      = {6, 6, 0, 0}
      stretch     = TRUE
      orientation = HORIZONTAL
    }

    image {
      function    = BOX
      state       = INSENSITIVE
      detail      = "trough-lower"
      file        = "assets/scale-horz-trough-disabled.png"
      border      = {6, 6, 0, 0}
      stretch     = TRUE
      orientation = HORIZONTAL
    }

    image {
      function    = BOX
      detail      = "trough-upper"
      file        = "assets/scale-vert-trough.png"
      border      = {0, 0, 6, 6}
      stretch     = TRUE
      orientation = VERTICAL
    }

    image {
      function    = BOX
      state       = INSENSITIVE
      detail      = "trough-upper"
      file        = "assets/scale-vert-trough-disabled.png"
      border      = {0, 0, 6, 6}
      stretch     = TRUE
      orientation = VERTICAL
    }

    image {
      function    = BOX
      detail      = "trough-lower"
      file        = "assets/scale-vert-trough-active.png"
      border      = {0, 0, 6, 6}
      stretch     = TRUE
      orientation = VERTICAL
    }

    image {
      function    = BOX
      state       = INSENSITIVE
      detail      = "trough-lower"
      file        = "assets/scale-vert-trough-disabled.png"
      border      = {0, 0, 6, 6}
      stretch     = TRUE
      orientation = VERTICAL
    }

    # Sliders

    image {
      function = SLIDER
      state    = NORMAL
      detail   = "hscale"
      file     = "assets/scale-slider.png"
    }

    image {
      function = SLIDER
      state    = PRELIGHT
      detail   = "hscale"
      file     = "assets/scale-slider-hover.png"
    }

    image {
      function = SLIDER
      state    = ACTIVE
      detail   = "hscale"
      file     = "assets/scale-slider-active.png"
    }

    image {
      function = SLIDER
      state    = INSENSITIVE
      detail   = "hscale"
      file     = "assets/scale-slider-disabled.png"
    }

    image {
      function = SLIDER
      state    = NORMAL
      detail   = "vscale"
      file     = "assets/scale-slider.png"
    }

    image {
      function = SLIDER
      state    = PRELIGHT
      detail   = "vscale"
      file     = "assets/scale-slider-hover.png"
    }

    image {
      function = SLIDER
      state    = ACTIVE
      detail   = "vscale"
      file     = "assets/scale-slider-active.png"
    }

    image {
      function = SLIDER
      state    = INSENSITIVE
      detail   = "vscale"
      file     = "assets/scale-slider-disabled.png"
    }

    ###########
    # Menubar #
    ###########

    # image {
    #   function = BOX
    #   detail   = "menubar"
    #   file     = "assets/border.png"
    #   border   = {0, 0, 0, 1}
    # }

    #########
    # Menus #
    #########

    image {
      function = BOX
      state    = PRELIGHT
      detail   = "menu_scroll_arrow_up"
      file     = "assets/border.png"
    }

    image {
      function = BOX
      detail   = "menu_scroll_arrow_up"
      file     = "assets/border.png"
      border   = {0, 0, 0, 1}
    }

    image {
      function = BOX
      state    = PRELIGHT
      detail   = "menu_scroll_arrow_down"
      file     = "assets/border.png"
    }

    image {
      function = BOX
      detail   = "menu_scroll_arrow_down"
      file     = "assets/border.png"
      border   = {0, 0, 1, 0}
    }

    ###########
    # Entries #
    ###########

    image {
      function = SHADOW
      state    = ACTIVE
      detail   = "entry"
      file     = "assets/entry-active.png"
      border   = {8, 8, 8, 8}
      stretch  = TRUE
    }

    image {
      function = SHADOW
      state    = INSENSITIVE
      detail   = "entry"
      file     = "assets/entry-disabled.png"
      border   = {8, 8, 8, 8}
      stretch  = TRUE
    }

    image {
      function = SHADOW
      detail   = "entry"
      file     = "assets/entry.png"
      border   = {8, 8, 8, 8}
      stretch  = TRUE
    }

    image {
      function = FLAT_BOX
      state    = ACTIVE
      detail   = "entry_bg"
      file     = "assets/entry-background.png"
    }

    image {
      function = FLAT_BOX
      state    = INSENSITIVE
      detail   = "entry_bg"
      file     = "assets/entry-background-disabled.png"
    }

    image {
      function = FLAT_BOX
      detail   = "entry_bg"
      file     = "assets/entry-background.png"
    }

    #########
    # Spins #
    #########

    # Spin-Up LTR

    image {
      function        = BOX
      state           = NORMAL
      detail          = "spinbutton_up"
      file            = "assets/spin-ltr-up.png"
      border          = {0, 8, 8, 0}
      stretch         = TRUE
      overlay_file    = "assets/pan-up.png"
      overlay_stretch = FALSE
      direction       = LTR
    }

    image {
      function        = BOX
      state           = PRELIGHT
      detail          = "spinbutton_up"
      file            = "assets/spin-ltr-up-hover.png"
      border          = {0, 8, 8, 0}
      stretch         = TRUE
      overlay_file    = "assets/pan-up.png"
      overlay_stretch = FALSE
      direction       = LTR
    }

    image {
      function        = BOX
      state           = ACTIVE
      detail          = "spinbutton_up"
      file            = "assets/spin-ltr-up-active.png"
      border          = {0, 8, 8, 0}
      stretch         = TRUE
      overlay_file    = "assets/pan-up.png"
      overlay_stretch = FALSE
      direction       = LTR
    }

    image {
      function        = BOX
      state           = INSENSITIVE
      detail          = "spinbutton_up"
      file            = "assets/spin-ltr-up-disabled.png"
      border          = {0, 8, 8, 0}
      stretch         = TRUE
      overlay_file    = "assets/pan-up-disabled.png"
      overlay_stretch = FALSE
      direction       = LTR
    }

    # Spin-Up RTL

    image {
      function        = BOX
      state           = NORMAL
      detail          = "spinbutton_up"
      file            = "assets/spin-rtl-up.png"
      border          = {8, 0, 8, 0}
      stretch         = TRUE
      overlay_file    = "assets/pan-up.png"
      overlay_stretch = FALSE
      direction       = RTL
    }

    image {
      function        = BOX
      state           = PRELIGHT
      detail          = "spinbutton_up"
      file            = "assets/spin-rtl-up-hover.png"
      border          = {8, 0, 8, 0}
      stretch         = TRUE
      overlay_file    = "assets/pan-up.png"
      overlay_stretch = FALSE
      direction       = RTL
    }

    image {
      function        = BOX
      state           = ACTIVE
      detail          = "spinbutton_up"
      file            = "assets/spin-rtl-up-hover.png"
      border          = {8, 0, 8, 0}
      stretch         = TRUE
      overlay_file    = "assets/pan-up.png"
      overlay_stretch = FALSE
      direction       = RTL
    }

    image {
      function        = BOX
      state           = INSENSITIVE
      detail          = "spinbutton_up"
      file            = "assets/spin-rtl-up-disabled.png"
      border          = {8, 0, 8, 0}
      stretch         = TRUE
      overlay_file    = "assets/pan-up-disabled.png"
      overlay_stretch = FALSE
      direction       = RTL
    }

    # Spin-Down LTR

    image {
      function        = BOX
      state           = NORMAL
      detail          = "spinbutton_down"
      file            = "assets/spin-ltr-down.png"
      border          = {0, 8, 0, 8}
      stretch         = TRUE
      overlay_file    = "assets/pan-down.png"
      overlay_stretch = FALSE
      direction       = LTR
    }

    image {
      function        = BOX
      state           = PRELIGHT
      detail          = "spinbutton_down"
      file            = "assets/spin-ltr-down-hover.png"
      border          = {0, 8, 0, 8}
      stretch         = TRUE
      overlay_file    = "assets/pan-down.png"
      overlay_stretch = FALSE
      direction       = LTR
    }

    image {
      function        = BOX
      state           = ACTIVE
      detail          = "spinbutton_down"
      file            = "assets/spin-ltr-down-active.png"
      border          = {0, 8, 0, 8}
      stretch         = TRUE
      overlay_file    = "assets/pan-down.png"
      overlay_stretch = FALSE
      direction       = LTR
    }

    image {
      function        = BOX
      state           = INSENSITIVE
      detail          = "spinbutton_down"
      file            = "assets/spin-ltr-down-disabled.png"
      border          = {0, 8, 0, 8}
      stretch         = TRUE
      overlay_file    = "assets/pan-down-disabled.png"
      overlay_stretch = FALSE
      direction       = LTR
    }

    # Spin-Down RTL

    image {
      function        = BOX
      state           = NORMAL
      detail          = "spinbutton_down"
      file            = "assets/spin-rtl-down.png"
      border          = {8, 0, 0, 8}
      stretch         = TRUE
      overlay_file    = "assets/pan-down.png"
      overlay_stretch = FALSE
      direction       = RTL
    }

    image {
      function        = BOX
      state           = PRELIGHT
      detail          = "spinbutton_down"
      file            = "assets/spin-rtl-down-hover.png"
      border          = {8, 0, 0, 8}
      stretch         = TRUE
      overlay_file    = "assets/pan-down.png"
      overlay_stretch = FALSE
      direction       = RTL
    }

    image {
      function        = BOX
      state           = ACTIVE
      detail          = "spinbutton_down"
      file            = "assets/spin-rtl-down-active.png"
      border          = {8, 0, 0, 8}
      stretch         = TRUE
      overlay_file    = "assets/pan-down.png"
      overlay_stretch = FALSE
      direction       = RTL
    }

    image {
      function        = BOX
      state           = INSENSITIVE
      detail          = "spinbutton_down"
      file            = "assets/spin-rtl-down-disabled.png"
      border          = {8, 0, 0, 8}
      stretch         = TRUE
      overlay_file    = "assets/pan-down-disabled.png"
      overlay_stretch = FALSE
      direction       = RTL
    }

    ##############
    # Scrollbars #
    ##############

    image {
      function    = BOX
      detail      = "bar"
      file        = "assets/progressbar-progress.png"
      stretch     = TRUE
      border      = {0, 0, 0, 0}
      orientation = HORIZONTAL
    }

    image {
      function    = BOX
      detail      = "bar"
      file        = "assets/progressbar-progress.png"
      stretch     = TRUE
      border      = {0, 0, 0, 0}
      orientation = VERTICAL
    }

    #############
    # Treeviews #
    #############

    # Disable active the column highlight
    # We need to match specific cells or we break stuff
    # Looking at you deadbeef

    image {
      function = FLAT_BOX
      detail   = "cell_even_sorted"
      state    = NORMAL
    }

    image {
      function = FLAT_BOX
      detail   = "cell_odd_sorted"
      state    = NORMAL
    }

    # Disable all the other shadows
    # This prevents the Raleigh effect
    image {
      function = SHADOW
    }
  }
}

style "menubar" {
  bg[NORMAL]      = @titlebar_bg_color
  fg[NORMAL]      = mix(0.7, @titlebar_fg_color, @titlebar_bg_color)
  fg[PRELIGHT]    = @titlebar_fg_color
  fg[INSENSITIVE] = mix(0.3, @titlebar_fg_color, @titlebar_bg_color)
  # Needed to fix Firefox's menubar text
  bg[SELECTED]    = mix(0.12, @titlebar_fg_color, @titlebar_bg_color)
  fg[SELECTED]    = @titlebar_fg_color
}

style "menubar_item" {
  xthickness = 3
  ythickness = 4

  fg[NORMAL]      = mix(0.7, @titlebar_fg_color, @titlebar_bg_color)
  bg[PRELIGHT]    = mix(0.12, @titlebar_fg_color, @titlebar_bg_color)
  fg[PRELIGHT]    = @titlebar_fg_color
  fg[INSENSITIVE] = mix(0.3, @titlebar_fg_color, @titlebar_bg_color)
}

style "menu" {
  xthickness = 0
  ythickness = 0

  bg[NORMAL]      = @menu_color
  bg[INSENSITIVE] = @menu_color
  bg[PRELIGHT]    = @menu_color
  bg[SELECTED]    = mix(0.08, @fg_color, @menu_color)
}

style "menu_item" {
  xthickness = 4
  ythickness = 4

  bg[PRELIGHT]   = mix(0.08, @fg_color, @menu_color)
  fg[PRELIGHT]   = @fg_color
  # Chromium uses this setting
  bg[SELECTED]   = mix(0.08, @fg_color, @menu_color)
  text[SELECTED] = @fg_color
  # Some widgets use text, we need to handle that
  text[NORMAL]   = @fg_color
  text[PRELIGHT] = @fg_color

  # Unfortunately we can't tell regular and menu checks/radios apart
  # Without the heirarchy
  engine "pixmap" {

    #################
    # Check Buttons #
    #################

    image {
      function        = CHECK
      state           = NORMAL
      shadow          = OUT
      overlay_file    = "assets/menu-checkbox-unchecked.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = PRELIGHT
      shadow          = OUT
      overlay_file    = "assets/menu-checkbox-unchecked.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = ACTIVE
      shadow          = OUT
      overlay_file    = "assets/menu-checkbox-unchecked.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = INSENSITIVE
      shadow          = OUT
      overlay_file    = "assets/menu-checkbox-unchecked-disabled.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = NORMAL
      shadow          = IN
      overlay_file    = "assets/menu-checkbox-checked.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = PRELIGHT
      shadow          = IN
      overlay_file    = "assets/menu-checkbox-checked.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = ACTIVE
      shadow          = IN
      overlay_file    = "assets/menu-checkbox-checked.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = INSENSITIVE
      shadow          = IN
      overlay_file    = "assets/menu-checkbox-checked-disabled.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = NORMAL
      shadow          = ETCHED_IN
      overlay_file    = "assets/menu-checkbox-mixed.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = PRELIGHT
      shadow          = ETCHED_IN
      overlay_file    = "assets/menu-checkbox-mixed.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = ACTIVE
      shadow          = ETCHED_IN
      overlay_file    = "assets/menu-checkbox-mixed.png"
      overlay_stretch = FALSE
    }

    image {
      function        = CHECK
      state           = INSENSITIVE
      shadow          = ETCHED_IN
      overlay_file    = "assets/menu-checkbox-mixed-disabled.png"
      overlay_stretch = FALSE
    }

    #################
    # Radio Buttons #
    #################

    image {
      function        = OPTION
      state           = NORMAL
      shadow          = OUT
      overlay_file    = "assets/menu-radio-unchecked.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = PRELIGHT
      shadow          = OUT
      overlay_file    = "assets/menu-radio-unchecked.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = ACTIVE
      shadow          = OUT
      overlay_file    = "assets/menu-radio-unchecked.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = INSENSITIVE
      shadow          = OUT
      overlay_file    = "assets/menu-radio-unchecked-disabled.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = NORMAL
      shadow          = IN
      overlay_file    = "assets/menu-radio-checked.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = PRELIGHT
      shadow          = IN
      overlay_file    = "assets/menu-radio-checked.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = ACTIVE
      shadow          = IN
      overlay_file    = "assets/menu-radio-checked.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = INSENSITIVE
      shadow          = IN
      overlay_file    = "assets/menu-radio-checked-disabled.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = NORMAL
      shadow          = ETCHED_IN
      overlay_file    = "assets/menu-radio-mixed.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = PRELIGHT
      shadow          = ETCHED_IN
      overlay_file    = "assets/menu-radio-mixed.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = ACTIVE
      shadow          = ETCHED_IN
      overlay_file    = "assets/menu-radio-mixed.png"
      overlay_stretch = FALSE
    }

    image {
      function        = OPTION
      state           = INSENSITIVE
      shadow          = ETCHED_IN
      overlay_file    = "assets/menu-radio-mixed-disabled.png"
      overlay_stretch = FALSE
    }
  }
}

style "separator_menu_item" {
  xthickness = 0
  ythickness = 2

  engine "pixmap" {
    image {
      function = BOX
      file     = "assets/border.png"
      border   = {0, 0, 0, 1}
    }
  }
}

style "button_label" {
  # fg[NORMAL] = mix(0.7, @fg_color, @bg_color)
  # fg[INSENSITIVE] = mix(0.3, @fg_color, @bg_color)

  font_name = "Medium"
}

style "normal_button_label" {
  # fg[NORMAL] = @fg_color
  # fg[INSENSITIVE] = mix(0.5, @fg_color, @bg_color)

  font_name = "Regular"
}

style "button" {
  xthickness = 4
  ythickness = 4

  # For the sake of sanity style buttons this way
  engine "pixmap" {

    ###########
    # Buttons #
    ###########

    image {
      function = BOX
      state    = NORMAL
      file     = "assets/button.png"
      border   = {8, 8, 8, 8}
      stretch  = TRUE
    }

    image {
      function = BOX
      state    = PRELIGHT
      shadow   = OUT
      file     = "assets/button-hover.png"
      border   = {8, 8, 8, 8}
      stretch  = TRUE
    }

    # Don't add hover effect on pressed buttons
    image {
      function = BOX
      state    = PRELIGHT
      shadow   = IN
      file     = "assets/button-active.png"
      border   = {8, 8, 8, 8}
      stretch  = TRUE
    }

    image {
      function = BOX
      state    = ACTIVE
      file     = "assets/button-active.png"
      border   = {8, 8, 8, 8}
      stretch  = TRUE
    }

    image {
      function = BOX
      state    = INSENSITIVE
      file     = "assets/button-disabled.png"
      border   = {8, 8, 8, 8}
      stretch  = TRUE
    }
  }
}

style "link_button" {
  # Disable the button effect, leave just the link
  engine "pixmap" {
    image {
      function = BOX
    }
  }
}

style "entry" {
  base[NORMAL]      = @bg_color
  base[SELECTED]    = mix (0.24, @selected_bg_color, @bg_color)
  base[INSENSITIVE] = @bg_color
  base[ACTIVE]      = mix (0.24, @selected_bg_color, @bg_color)

  # We set this same as the border of the border of the entry
  # This way there's no overlap
  xthickness = 6
  ythickness = 6
}

style "combobox" {
  xthickness = 6
  ythickness = 6

  # This affects only the button beside an entry
  GtkButton::inner-border = {0, 0, 0, 0}

  # For the sake of sanity style buttons this way
  engine "pixmap" {

    ###########
    # Buttons #
    ###########

    image {
      function = BOX
      state    = NORMAL
      file     = "assets/entry.png"
      border   = {8, 8, 8, 8}
      stretch  = TRUE
    }

    image {
      function = BOX
      state    = PRELIGHT
      file     = "assets/entry-hover.png"
      border   = {8, 8, 8, 8}
      stretch  = TRUE
    }

    image {
      function = BOX
      state    = ACTIVE
      file     = "assets/entry-active.png"
      border   = {8, 8, 8, 8}
      stretch  = TRUE
    }

    image {
      function = BOX
      state    = INSENSITIVE
      file     = "assets/entry-disabled.png"
      border   = {8, 8, 8, 8}
      stretch  = TRUE
    }
  }
}

style "combobox_cellview" {
  # text[NORMAL] = mix(0.7, @fg_color, @bg_color)
  # text[INSENSITIVE] = mix(0.3, @fg_color, @bg_color)
}

style "combobox_entry" {
  # Since one side of the button is missing, we need to shift the arrow a little to the right
  GtkButton::inner-border = {0, 2, 0, 0}

  engine "pixmap" {

    #############
    # LTR entry #
    #############

    image {
      function  = SHADOW
      state     = NORMAL
      detail    = "entry"
      file      = "assets/combo-left-entry.png"
      border    = {8, 8, 8, 8}
      stretch   = TRUE
      direction = LTR
    }

    image {
      function  = SHADOW
      state     = ACTIVE
      detail    = "entry"
      file      = "assets/combo-left-entry-active.png"
      border    = {8, 8, 8, 8}
      stretch   = TRUE
      direction = LTR
    }

    image {
      function  = SHADOW
      state     = INSENSITIVE
      detail    = "entry"
      file      = "assets/combo-left-entry-disabled.png"
      border    = {8, 8, 8, 8}
      stretch   = TRUE
      direction = LTR
    }

    #############
    # RTL entry #
    #############

    image {
      function  = SHADOW
      state     = NORMAL
      detail    = "entry"
      file      = "assets/combo-right-entry.png"
      border    = {8, 8, 8, 8}
      stretch   = TRUE
      direction = RTL
    }

    image {
      function  = SHADOW
      state     = ACTIVE
      detail    = "entry"
      file      = "assets/combo-right-entry-active.png"
      border    = {8, 8, 8, 8}
      stretch   = TRUE
      direction = RTL
    }

    image {
      function  = SHADOW
      state     = INSENSITIVE
      detail    = "entry"
      file      = "assets/combo-right-entry-disabled.png"
      border    = {8, 8, 8, 8}
      stretch   = TRUE
      direction = RTL
    }

    ##############
    # LTR button #
    ##############

    image {
      function  = BOX
      state     = NORMAL
      detail    = "button"
      file      = "assets/combo-right-entry.png"
      border    = {0, 8, 8, 8}
      stretch   = TRUE
      direction = LTR
    }

    image {
      function  = BOX
      state     = PRELIGHT
      detail    = "button"
      file      = "assets/combo-right-entry-hover.png"
      border    = {0, 8, 8, 8}
      stretch   = TRUE
      direction = LTR
    }

    image {
      function  = BOX
      state     = ACTIVE
      detail    = "button"
      file      = "assets/combo-right-entry-active.png"
      border    = {0, 8, 8, 8}
      stretch   = TRUE
      direction = LTR
    }

    image {
      function  = BOX
      state     = INSENSITIVE
      detail    = "button"
      file      = "assets/combo-right-entry-disabled.png"
      border    = {0, 8, 8, 8}
      stretch   = TRUE
      direction = LTR
    }

    ##############
    # RTL button #
    ##############

    image {
      function  = BOX
      state     = NORMAL
      detail    = "button"
      file      = "assets/combo-left-entry.png"
      border    = {8, 0, 8, 8}
      stretch   = TRUE
      direction = RTL
    }

    image {
      function  = BOX
      state     = PRELIGHT
      detail    = "button"
      file      = "assets/combo-left-entry-hover.png"
      border    = {8, 0, 8, 8}
      stretch   = TRUE
      direction = RTL
    }

    image {
      function  = BOX
      state     = ACTIVE
      detail    = "button"
      file      = "assets/combo-left-entry-active.png"
      border    = {8, 0, 8, 8}
      stretch   = TRUE
      direction = RTL
    }

    image {
      function  = BOX
      state     = INSENSITIVE
      detail    = "button"
      file      = "assets/combo-left-entry-disabled.png"
      border    = {8, 0, 8, 8}
      stretch   = TRUE
      direction = RTL
    }
  }
}

style "combo_button_padding" {
  # Since one side of the button is missing, we need to shift the arrow a
  # little to the right.
  # This is the same thing we've done above but the combo, unlike the combobox,
  # uses padding the same way as a button.
  GtkButton::inner-border = {3, 6, 3, 3}
}

style "notebook" {
  xthickness = 3
  ythickness = 3
}

style "notebook_tab_label" {
  fg[ACTIVE] = mix(0.7, @fg_color, @bg_color)

  font_name = "Medium"
}

style "notebook_viewport" {
  bg[NORMAL] = @base_color
}

style "notebook_bg" {
  bg[NORMAL]      = @base_color
  bg[PRELIGHT]    = @base_color
  bg[INSENSITIVE] = @base_color
}

style "notebook_entry" {
  base[NORMAL]      = @base_color
  base[SELECTED]    = mix (0.24, @selected_bg_color, @base_color)
  base[INSENSITIVE] = @base_color
  base[ACTIVE]      = mix (0.24, @selected_bg_color, @base_color)
}

style "normal_bg" {
  bg[NORMAL]      = @bg_color
  bg[PRELIGHT]    = @bg_color
  bg[INSENSITIVE] = @bg_color
}

style "normal_entry" {
  base[NORMAL]      = @bg_color
  base[SELECTED]    = mix (0.24, @selected_bg_color, @bg_color)
  base[INSENSITIVE] = @bg_color
  base[ACTIVE]      = mix (0.24, @selected_bg_color, @bg_color)
}

style "textview" {
  bg[NORMAL] = @base_color
}

style "scale_horz" {
  engine "pixmap" {
    image {
      function    = BOX
      detail      = "trough-upper"
      file        = "assets/scale-horz-trough.png"
      border      = {6, 6, 0, 0}
      stretch     = TRUE
    }

    image {
      function    = BOX
      detail      = "trough-lower"
      file        = "assets/scale-horz-trough-active.png"
      border      = {6, 6, 0, 0}
      stretch     = TRUE
    }
  }
}

style "scale_vert" {
  engine "pixmap" {
    image {
      function    = BOX
      detail      = "trough-upper"
      file        = "assets/scale-vert-trough.png"
      border      = {0, 0, 6, 6}
      stretch     = TRUE
    }

    image {
      function    = BOX
      detail      = "trough-lower"
      file        = "assets/scale-vert-trough-active.png"
      border      = {0, 0, 6, 6}
      stretch     = TRUE
    }
  }
}

style "progressbar" {
  xthickness = 0
  ythickness = 0

  fg[PRELIGHT] = @selected_fg_color

  engine "pixmap" {
    image {
      function    = BOX
      detail      = "trough"
      file        = "assets/progressbar-trough.png"
      border      = {0, 0, 0, 0}
      stretch     = TRUE
      orientation = HORIZONTAL
    }

    image {
      function    = BOX
      detail      = "trough"
      file        = "assets/progressbar-trough.png"
      border      = {0, 0, 0, 0}
      stretch     = TRUE
      orientation = VERTICAL
    }
  }
}

style "treeview_header" {
  xthickness = 2
  ythickness = 2

  fg[NORMAL]   = mix(0.7, @fg_color, @base_color)
  fg[PRELIGHT] = mix(0.7, @fg_color, @base_color)
  fg[ACTIVE]   = mix(0.7, @fg_color, @base_color)

  font_name = "Medium"

  GtkButton::inner-border = {4, 4, 0, 2}

  engine "pixmap" {
    image {
      function  = BOX
      state     = NORMAL
      file      = "assets/treeview-ltr-button.png"
      border    = {0, 1, 0, 1}
      stretch   = TRUE
      direction = LTR
    }

    image {
      function  = BOX
      state     = PRELIGHT
      file      = "assets/treeview-ltr-button-hover.png"
      border    = {0, 1, 0, 1}
      stretch   = TRUE
      direction = LTR
    }

    image {
      function  = BOX
      state     = ACTIVE
      file      = "assets/treeview-ltr-button-active.png"
      border    = {0, 1, 0, 1}
      stretch   = TRUE
      direction = LTR
    }

    image {
      function  = BOX
      state     = NORMAL
      file      = "assets/treeview-rtl-button.png"
      border    = {1, 0, 0, 1}
      stretch   = TRUE
      direction = RTL
    }

    image {
      function  = BOX
      state     = PRELIGHT
      file      = "assets/treeview-rtl-button-hover.png"
      border    = {1, 0, 0, 1}
      stretch   = TRUE
      direction = RTL
    }

    image {
      function  = BOX
      state     = ACTIVE
      file      = "assets/treeview-rtl-button-active.png"
      border    = {1, 0, 0, 1}
      stretch   = TRUE
      direction = RTL
    }

    image {
      function        = ARROW
      state           = NORMAL
      overlay_file    = "assets/pan-up.png"
      overlay_stretch = FALSE
      arrow_direction = UP
    }

    image {
      function        = ARROW
      state           = PRELIGHT
      overlay_file    = "assets/pan-up.png"
      overlay_stretch = FALSE
      arrow_direction = UP
    }

    image {
      function        = ARROW
      state           = ACTIVE
      overlay_file    = "assets/pan-up.png"
      overlay_stretch = FALSE
      arrow_direction = UP
    }

    image {
      function        = ARROW
      state           = NORMAL
      overlay_file    = "assets/pan-down.png"
      overlay_stretch = FALSE
      arrow_direction = DOWN
    }

    image {
      function        = ARROW
      state           = PRELIGHT
      overlay_file    = "assets/pan-down.png"
      overlay_stretch = FALSE
      arrow_direction = DOWN
    }

    image {
      function        = ARROW
      state           = ACTIVE
      overlay_file    = "assets/pan-down.png"
      overlay_stretch = FALSE
      arrow_direction = DOWN
    }
  }
}

style "scrolled_window" {
  engine "pixmap" {
    image {
      function = SHADOW
      file     = "assets/frame.png"
      border   = {1, 1, 1, 1}
      stretch  = TRUE
    }
  }
}

style "frame" {
  engine "pixmap" {
    image {
      function = SHADOW
      shadow   = NONE
    }

    image {
      function = SHADOW
      file     = "assets/frame.png"
      border   = {1, 1, 1, 1}
      stretch  = TRUE
    }

    image {
      function       = SHADOW_GAP
      file           = "assets/frame.png"
      border         = {1, 1, 1, 1}
      stretch        = TRUE
      gap_start_file = "assets/border.png"
      gap_end_file   = "assets/border.png"
    }
  }
}

style "tool_button" {
  GtkButton::inner-border = {2, 2, 2, 2}

  # For the sake of sanity style buttons this way
  engine "pixmap" {
    image {
      function = BOX
      state    = NORMAL
      file     = "assets/flat-button.png"
      border   = {8, 8, 8, 8}
      stretch  = TRUE
    }

    image {
      function = BOX
      state    = PRELIGHT
      shadow   = OUT
      file     = "assets/flat-button-hover.png"
      border   = {8, 8, 8, 8}
      stretch  = TRUE
    }

    # Don't add hover effect on pressed buttons
    image {
      function = BOX
      state    = PRELIGHT
      shadow   = IN
      file     = "assets/flat-button-active.png"
      border   = {8, 8, 8, 8}
      stretch  = TRUE
    }

    image {
      function = BOX
      state    = ACTIVE
      file     = "assets/flat-button-active.png"
      border   = {8, 8, 8, 8}
      stretch  = TRUE
    }

    image {
      function = BOX
      state    = INSENSITIVE
      shadow   = OUT
      file     = "assets/flat-button-disabled.png"
      border   = {8, 8, 8, 8}
      stretch  = TRUE
    }

    image {
      function = BOX
      state    = INSENSITIVE
      shadow   = IN
      file     = "assets/button-disabled.png"
      border   = {8, 8, 8, 8}
      stretch  = TRUE
    }
  }
}

style "toolbar_separator" {
  GtkWidget::wide-separators  = 1
  GtkWidget::separator-width  = 1
  GtkWidget::separator-height = 1

  engine "pixmap" {
    image {
      function = BOX
      file     = "assets/border.png"
    }
  }
}

style "inline_toolbar" {
  # GtkToolbar::button-relief = GTK_RELIEF_NORMAL

  engine "pixmap" {
    image {
      function = BOX
      file     = "assets/frame-inline.png"
      border   = {1, 1, 0, 1}
      stretch  = TRUE
    }
  }
}

style "tooltip" {
  xthickness = 8
  ythickness = 8

  bg[NORMAL]   = @tooltip_bg_color
  fg[NORMAL]   = @tooltip_fg_color
  bg[SELECTED] = @tooltip_bg_color
}

style "disable_text_shadow" {
  engine "murrine" {
    textstyle = 0
  }
}

style "disable_separator" {
  xthickness = 0
  ythickness = 0

  GtkWidget::wide-separators = 1
}

# Default style, containing theme properties and trying to match every widget as
# much as possible, which is not only faster than trying to match every widget
# by its own but also less bug-prune and more consistent. However there is some
# widget specific stuff that needs to be taken care of, which is the point of
# every other style below.
class "GtkWidget" style "default"

######################################
# Override padding, style and colour #
######################################

class "GtkButton"                                                  style "button"
class "GtkLinkButton"                                              style "link_button"
class "GtkEntry"                                                   style "entry"
class "GtkOldEditable"                                             style "entry"
class "GtkNotebook"                                                style "notebook"
class "GtkHScale"                                                  style "scale_horz"
class "GtkVScale"                                                  style "scale_vert"
class "GtkProgressBar"                                             style "progressbar"
class "GtkScrolledWindow"                                          style "scrolled_window"
class "GtkFrame"                                                   style "frame"
class "GtkSeparatorToolItem"                                       style "toolbar_separator"
class "GtkMenuBar"                                                 style "menubar"
class "GtkMenu"                                                    style "menu"
class "GtkTextView"                                                style "textview"

# Menu and menubar items
widget_class "*<GtkMenuItem>*"                                     style "menu_item"
widget_class "*<GtkMenuBar>.<GtkMenuItem>*"                        style "menubar_item"
widget_class "*<GtkSeparatorMenuItem>*"                            style "separator_menu_item"

# Treeview buttons
widget_class "*<GtkTreeView>*<GtkButton>*"                         style "treeview_header"

# Give the file chooser toolbar a border
widget_class "*<GtkFileChooserDefault>*<GtkToolbar>"               style "inline_toolbar"

# Fix padding on regular comboboxes
widget_class "*<GtkComboBox>.<GtkButton>"                          style "combobox"
widget_class "*<GtkOptionMenu>"                                    style "combobox"

# And disable separators on them
widget_class "*<GtkComboBox>.<GtkButton>*<GtkSeparator>"           style "disable_separator"
widget_class "*<GtkFontButton>*<GtkSeparator>"                     style "disable_separator"
widget_class "*<GtkFileChooserButton>*<GtkSeparator>"              style "disable_separator"

# Join together the ComboBoxEntry entry and button
widget_class "*<GtkComboBoxEntry>*"                                style "combobox_entry"

# Join the Combo entry and button
widget_class "*<GtkCombo>*"                                        style "combobox_entry"

# Tweak the padding on the button a little bit because it
# uses it a bit differently
widget_class "*<GtkCombo>.<GtkButton>"                             style "combo_button_padding"

# Alas we cannot do the same for ComboBoxText because there
# isn't a way to apply the style to only the comboboxes that
# have an entry inside

# Tool buttons have different styles
widget_class "*<GtkToolButton>*<GtkButton>"                        style "tool_button"
widget_class "*<GtkVBox>*<GtkEventBox>.<GtkToolbar>*<GtkButton>"   style "tool_button"

# Notebooks
widget_class "*<GtkNotebook>.<GtkLabel>"                           style "notebook_tab_label"
widget_class "*<GtkNotebook>.<GtkHBox>.<GtkLabel>"                 style "notebook_tab_label"

# Notebooks are white, act accordingly
widget_class "*<GtkNotebook>*<GtkEntry>"                           style "notebook_entry"
widget_class "*<GtkNotebook>*<GtkProgressBar>"                     style "notebook_bg"
widget_class "*<GtkNotebook>*<GtkSpinButton>"                      style "notebook_bg"
widget_class "*<GtkNotebook>*<GtkScrolledWindow>*<GtkViewport>"    style "notebook_bg"
widget_class "*<GtkNotebook>*<GimpRuler>"                          style "notebook_bg"
widget_class "*<GtkNotebook>.<GimpDisplayShell>*<GtkEventBox>"     style "notebook_bg"

# However, stuff inside eventboxes inside notebooks is grey
# again, react
widget_class "*<GtkNotebook>*<GtkEventBox>*<GtkEntry>"             style "normal_entry"
widget_class "*<GtkNotebook>*<GtkEventBox>*<GtkProgressBar>"       style "normal_bg"
widget_class "*<GtkNotebook>*<GtkEventBox>*<GtkSpinButton>"        style "normal_bg"

# Button labels
widget_class "*<GtkButton>.<GtkLabel>"                             style "button_label"

# Normalize button labels
widget_class "*<GtkCheckButton>.<GtkLabel>"                        style "normal_button_label"
widget_class "*<GtkOptionMenu>.<GtkLabel>"                         style "normal_button_label"

# ComboBoxes tend to draw the button label with text[]
# instead of fg[], we need to fix that
widget_class "*<GtkComboBox>*<GtkCellView>"                        style "combobox_cellview"

# Disable white text shadows
widget_class "*<GtkLabel>"                                         style "disable_text_shadow"
widget_class "*<GtkCellView>"                                      style "disable_text_shadow"

# GTK tooltips
widget "gtk-tooltip*"                                              style "tooltip"