@charset "UTF-8";

@mixin item-highlight {
  @if $new-highlight {
    background-color: gtk("@theme_selected_bg_color");
    color: gtk("@theme_button_foreground_active");
    border: 1px solid gtk("@theme_button_decoration_focus");
    border-radius: 3px;
  } @else {
    background-color: gtk("@theme_button_decoration_focus");
    color: gtk("@theme_button_foreground_active")
  }
}

/*********
 * Menus *
 *********/

menubar,
.menubar {
  -GtkWidget-window-dragging: true;
  padding: 0px;
  box-shadow: none;
  border-style: none;
  background-color: gtk("@theme_bg_color");

  &:backdrop {
    background-color: gtk("@theme_unfocused_bg_color");
  }

  >menuitem {
    min-height: 16px;
    padding: 4px 6px;
    @if $new-highlight {
      border-bottom: 3px solid transparent;
    }

    &:hover {
      //Seems like it :hover even with keyboard focus
      @if $new-highlight {
        background-color: gtkalpha(gtk("@theme_button_decoration_focus"), 0.3);
        color: gtk("@theme_button_foreground_active");
        border-bottom: 3px solid gtk("@theme_button_decoration_focus");
      } @else {
        background-color: gtk("@theme_button_decoration_focus");
        color: gtk("@theme_button_foreground_active");
      }
    }

    &:disabled {
      color: gtk("@insensitive_fg_color");
      box-shadow: none;

      &:backdrop {
        background-color: gtk("@theme_unfocused_bg_color");
        color: gtk("@insensitive_unfocused_fg_color");
      }
    }

    &:backdrop {
      background-color: gtk("@theme_unfocused_bg_color");
      color: gtk("@theme_unfocused_fg_color");
    }
  }
}

menu,
.menu {
  padding: 0px;
  background-color: gtk("@theme_bg_color");
  border: 0px solid transparent;
  // FIXME workaround for libreoffice gtk3, should be a border
  //border: 1px solid $border_color; // adds borders in a non composited env
  box-shadow: inset 0px 0px 0px 1px gtk("@borders");

  border-radius: $r;

  .csd & {
    //background-color: transparent;
    border: 0px solid;
    border-radius: $r;
    //box-shadow: 0px 0px 0px 1px $border_color, 2px 2px 2px 1px rgba(0, 0, 0, 0.1);
  }

  // axes borders in a composited env
  separator {
    color: gtk("@borders");
  }

  menuitem {
    text-shadow: none;
    min-height: 16px;
    min-width: 40px;
    padding: 4px 4px;

    @if $new-highlight{ 
      border: 1px solid transparent;
      margin: 4px;
    }

    &:hover {
      @include item-highlight();
    }

    &:disabled {
      color: gtk("@insensitive_fg_color");

      &:backdrop {
        color: gtk("@insensitive_unfocused_fg_color");
      }
    }

    &:backdrop,
    &:backdrop:hover {
      color: gtk("@theme_unfocused_fg_color");
      background-color: gtk("@theme_unfocused_bg_color");
    }

    // submenu indicators
    arrow {
      min-height: 16px;
      min-width: 16px;

      &:dir(ltr) {
        -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
        margin-left: 10px;
      }

      &:dir(rtl) {
        -gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
        margin-right: 10px;
      }
    }
  }

  // overflow arrows
  >arrow {
    @include button(undecorated);

    min-height: 16px;
    min-width: 16px;
    padding: 4px;
    background-color: transparent;
    border-radius: 0;

    &.top {
      margin-top: -6px;
      border: none;
      -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
    }

    &.bottom {
      margin-bottom: -6px;
      border: none;
      -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
    }

    &:hover { color: gtk("@theme_button_decoration_hover"); }
    &:active { color: gtk("@theme_button_decoration_focus");}

    &:backdrop { background-color: gtk("@theme_unfocused_bg_color"); }

    &:disabled {
      color: transparent;
      background-color: transparent;
      border-color: transparent ;
    }
  }
}

menuitem {
  accelerator { color: gtkalpha(currentColor,0.55); }
  check,
  radio {
    min-height: 18px;
    min-width: 18px;

    &:dir(ltr) { margin-right: 6px; }
    &:dir(rtl) { margin-left: 6px; }
  }
  &:active check, &:active radio {
    -gtk-icon-transform: translate(1px,1px);
  }
}
/***************
 * Popovers   *
 ***************/
/* menu buttons */
modelbutton.flat,
.menuitem.button.flat {
 min-height: 16px;
 padding: 4px 8px;

 @extend %undecorated_button;
 color: gtk("@theme_fg_color");
 &:hover {
    background-color: gtk("@theme_button_decoration_focus");
    color: gtk("@theme_button_foreground_active");
  }
 &:selected {
    background-color: gtk("@theme_button_decoration_focus");
    color: gtk("@theme_button_foreground_active");
  }
 &:backdrop, &:backdrop:hover {
    @extend %undecorated_button;
    color: gtk("@theme_unfocused_fg_color");
  }
  check:hover {-gtk-icon-source: -gtk-scaled(url("../assets/check-unchecked.png"), url("../assets/check-unchecked@2.png"));}
  radio:hover {-gtk-icon-source: -gtk-scaled(url("../assets/radio-unchecked.png"), url("../assets/radio-unchecked@2.png"));}

  check:checked:hover {-gtk-icon-source: -gtk-scaled(url("../assets/check-checked-active.png"), url("../assets/check-checked-active@2.png"));}
  radio:checked:hover {-gtk-icon-source: -gtk-scaled(url("../assets/radio-checked-active.png"), url("../assets/radio-checked-active@2.png"));}

  check:indeterminate:hover {-gtk-icon-source: -gtk-scaled(url("../assets/check-mixed.png"), url("../assets/check-mixed@2.png"));}
  radio:indeterminate:hover {-gtk-icon-source: -gtk-scaled(url("../assets/radio-mixed.png"), url("../assets/radio-mixed@2.png"));}

  // FIXME: remove the following when the checks/radios rewrite lands
  check:last-child,
  radio:last-child { margin-right: 0px; }

  check:first-child,
  radio:first-child { margin-left: 0px; }
  &:active check, &:active radio {
    -gtk-icon-transform: translate(1px,1px);
  }
}

modelbutton.flat arrow {
  background: none;

  &:hover { background: none; }

  &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }

  &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
}

popover.background {
  padding: 0px;
  border: 1px solid gtk("@borders");
  border-radius: 3px;
  background-color: gtk("@theme_bg_color");

  box-shadow: 0 2px 3px transparentize(black, 0.1);

  &:backdrop {
    box-shadow: none;
  }
  
  > list,
  > .view,
  > toolbar {
    border-style: none;
    background-color: transparent;
  }
  .csd &, & {
    &.touch-selection,
    &.magnifier {
      @extend %osd;

      border: 1px solid gtk("@borders");

      button { @extend %button };
    }

    &.osd { @extend %osd; }
  }

  separator { margin: 3px; }

  list separator { margin: 0px; }

  checkbutton,
  radiobutton { @extend modelbutton.flat; }
}

// .scale-popup .button,
// .scale-popup .button.flat { // +/- buttons on GtkVolumeButton popup
//   @extend %undecorated_button;
//   background-color: transparent;
//   padding: 5px;
//   color: w_color(text);
//   &:hover {
//     @extend %undecorated_button;
//     color: b_color(hover);
//   }
//   &:active {
//     color: b_color(active);
//   }
//   &:insensitive {
//     color: insensitive(w_color(text));
//   }
//   &:backdrop {
//     color: backdrop(w_color(text));
//     &:insensitive {
//       color: backdrop(insensitive(w_color(text)));
//     }
//   }
// }

GtkVolumeButton.button { padding: 5px; }
