@charset "UTF-8";

/********
 * Misc *
 ********/

/****************
* Print dialog *
*****************/
printdialog {
 paper {
   color: gtk("@theme_fg_color");
   border: 1px solid gtk("@borders");
   background: white;
   padding: 0;

   &:backdrop {
     color: gtk("@theme_unfocused_fg_color");
     border-color: gtk("@unfocused_borders");
     background: gtk("@print_paper_backdrop");
   }
 }

 .dialog-action-box { margin: 12px; }
}

/**********
* Frames *
**********/
frame > border,
.frame {
  box-shadow: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  border: 1px solid gtk("@borders");

  &.flat { border-style: none; }

  &:backdrop { border-color: gtk("@unfocused_borders"); }
}

actionbar > revealer >  box {
  padding: 6px;
  border-top: 1px solid gtk("@borders");

  &:backdrop { border-color: gtk("@unfocused_borders"); }
}

scrolledwindow {
  viewport.frame { // avoid double borders when viewport inside scrolled window
    border-style: none;
  }

  junction { // the small square between two scrollbars
    border-color: transparent;
    background-color: transparent;
    background-image: none;
  }
}

//vbox and hbox separators
separator {
  background: gtk("@borders");
  min-width: 1px;
  min-height: 1px;
}

/*************
* Expanders *
*************/

expander {
  arrow {
    min-width: 16px;
    min-height: 16px;
    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
    &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic');}
    &:hover { color: gtkshade(gtk("@theme_fg_color"),1.3); } //only lightens the arrow
    &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
  }
}

/*********
* Paned *
*********/

paned {
  > separator {
    min-width: 1px;
    min-height: 1px;
    -gtk-icon-source: none; // defeats the ugly default handle decoration
    border-style: none; // just to be sure
    background-color: transparent;
    // workaround, using background istead of a border since the border will get rendered twice (?)
    background-image: image(gtk("@borders"));
    background-size: 1px 1px;

    //&:selected { background-image: image($selected_bg_color); } // FIXME is this needed?

    &:backdrop { background-image: image(gtk("@unfocused_borders")); }

    &.wide {
      min-width: 5px;
      min-height: 5px;
      background-color: gtk("@theme_bg_color");
      background-image: image(gtk("@borders")), image(gtk("@borders"));
      background-size: 1px 1px, 1px 1px;

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

  &.horizontal > separator {
    background-repeat: repeat-y;

    &:dir(ltr) {
      margin: 0 -8px 0 0;
      padding: 0 8px 0 0;
      background-position: left;
    }
    &:dir(rtl) {
      margin: 0 0 0 -8px;
      padding: 0 0 0 8px;
      background-position: right;
    }

    &.wide {
      margin: 0;
      padding: 0;
      background-repeat: repeat-y, repeat-y;
      background-position: left, right;
    }
  }

  &.vertical > separator {
    margin: 0 0 -8px 0;
    padding: 0 0 8px 0;
    background-repeat: repeat-x;
    background-position: top;

    &.wide {
      margin: 0;
      padding: 0;
      background-repeat: repeat-x, repeat-x;
      background-position: bottom, top;
    }
  }
}

/*********************
* Spinner Animation *
*********************/

@keyframes spin {
 to { -gtk-icon-transform: rotate(1turn); }
}

spinner {
 background-image: none;
 opacity: 0; // non spinning spinner makes no sense
 -gtk-icon-source: -gtk-icontheme('process-working-symbolic');
 &:checked {
   opacity: 1;
   animation: spin 1s linear infinite;
   &:disabled {
     opacity: 0.5;
   }
 }
}
