/**********************
 * Window Decorations *
 *********************/
decoration {
  border-radius: 4px 4px 0 0;

  // lamefun trick to get rounded borders regardless of CSD use
  border-width: 0px;

  // this needs to be transparent
  // see bug #722563
  $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
  $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize($borders_color, 0.1));

    // lamefun trick to get rounded borders regardless of CSD use
  border-width: 0px;

  box-shadow: 0 4px 10px 2px transparentize(#211A1E, 0.6);
  // FIXME rationalize shadows

  // this is used for the resize cursor area
  margin: 10px;

  &:backdrop {
    // the transparent shadow here is to enforce that the shadow extents don't
    // change when we go to backdrop, to prevent jumping windows.
    // The biggest shadow should be in the same order then in the active state
    // or the jumping will happen during the transition.
    box-shadow: 0 4px 10px 2px transparentize(#211A1E, 0.8);
    transition: $backdrop_transition;
  }

  .maximized &,
  .fullscreen &,
  .tiled & { border-radius: 0; }

  .popup & { box-shadow: none; }

  // server-side decorations as used by mutter
  .ssd & { box-shadow: none; } //just doing borders, wm draws actual shadows

  .csd.popup & {
    border-radius: 7px;
    box-shadow: 0 4px 8px $menu_shadow_color;
    border: 1px solid transparentize($borders_color, 0.3);
  }

  tooltip.csd & {
    border-radius: 5px;
    box-shadow: none;
  }

  messagedialog.csd & {
    border-radius: 7px;
    box-shadow: 0 1px 2px transparentize(black, 0.8),
                  0 0 0 1px transparentize($_wm_border,0.1);
  }

  .solid-csd & {
    border-radius: 0;
    margin: 0px;
    background-color: $backdrop_bg_color;
    border: solid 1px $backdrop_borders_color;
    box-shadow: none;
  }
}

// Window Close button
button.titlebutton {
  background-repeat: no-repeat;
  background-position: center;
  min-height: 20px;
  padding: 0 1px;
  box-shadow: none;
  
  &.close {
    background-image: -gtk-scaled(url("../assets/close.png"),url("../assets/close@2.png"));
    &:hover,&:active {
      background-image: -gtk-scaled(url("../assets/close_prelight.png"),url("../assets/close_prelight@2.png"));
    }
  }
  &.maximize {
    background-image: -gtk-scaled(url("../assets/maximize.png"),url("../assets/maximize@2.png"));
    &:hover,&:active {
      background-image: -gtk-scaled(url("../assets/maximize_prelight.png"),url("../assets/maximize_prelight@2.png"));
    }
  }
  &.minimize {
    background-image: -gtk-scaled(url("../assets/min.png"),url("../assets/min@2.png"));
    &:hover,&:active {
      background-image: -gtk-scaled(url("../assets/min_prelight.png"),url("../assets/min_prelight@2.png"));
    }
  }

  .selection-mode & {
    @extend %button.flat.suggested-action;

    @extend %nobg_selected_items;
  }

  &:backdrop { 
    -gtk-icon-shadow: none; 
    background-image: -gtk-scaled(url("../assets/close_unfocused.png"),url("../assets/close_unfocused@2.png"));
  }
}

headerbar.selection-mode button.titlebutton,
.titlebar.selection-mode button.titlebutton {
  @include _button_text_shadow(white, $selected_bg_color);

  &:backdrop { -gtk-icon-shadow: none; }
}


// catch all extend :)

%selected_items {
  background-color: $selected_bg_color;

  @at-root %nobg_selected_items, & {
    color: $selected_fg_color;
    font-weight: bold;
    //&:hover{background-color: transparent;}
    @if $variant == 'light' { outline-color: transparentize($selected_fg_color, 0.7); }

    &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }

    &:backdrop {
      color: $backdrop_selected_fg_color;

      &:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
    }
  }
}

.monospace { font-family: Monospace; }