/**********************
 * Window Decorations *
 **********************/
decoration {
  transition: $shadow_transition;
  border-radius: $pocillo_radius $pocillo_radius 0 0;
  box-shadow: $shadow_4, 0 16px 16px transparent;

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

  &: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: $shadow_2, 0 16px 16px transparent;
  }

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

  .popup & { box-shadow: none; }

  // server-side decorations as used by mutter
  .ssd & { 
    box-shadow: 0 3px 3px rgba(156, 152, 152, 0.16); 
    //padding-top: $image_button_padding;
    //padding-bottom: $image_button_padding;
  } // just doing borders, wm draws actual shadows

  .csd.popup & {
    border-radius: $pocillo_radius;
    box-shadow: $shadow_2;
  }

  tooltip.csd & {
    border-radius: $pocillo_radius;
    box-shadow: $shadow_2;
  }

  messagedialog.csd & {
    border-radius: $pocillo_radius;
    // box-shadow: $shadow_4, 0 16px 16px transparent;

    // &:backdrop { box-shadow: $shadow_2, 0 16px 16px transparent; }
  }

  .solid-csd & {
    margin: 0;
    // padding: 4px;
    border-radius: 0;
    box-shadow: none;
    // box-shadow: inset 0 0 0 4px $titlebar_bg_color;
    background-color: $titlebar_bg_color;
  }
}

// Window Close button
button.titlebutton {
  // @extend %simple_flat_button;

  @extend %circular_button;
  padding: $mini_padding * 2;
  min-width: $close_button_size;
  min-height: $close_button_size;

  .selection-mode & {
  }
}
