/**
 * @file
 * Styling for Settings Tray module.
 */
/*
 * Position the edit toolbar tab.
 * @todo Move changes into contextual module when Settings Tray is not
 *   experimental: https://www.drupal.org/node/2784591.
 */
.toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
  float: left;
}
[dir="rtl"] .toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
  float: right;
}

#main-canvas.js-outside-in-edit-mode a,
#main-canvas.js-outside-in-edit-mode input {
  pointer-events: none;
}
#main-canvas.js-outside-in-edit-mode .contextual-links a {
  pointer-events: inherit;
}

/*
 * Force the tray to be 100% width at the same breakpoint the dialog system uses
 * to expand dialog widths.
 */
@media all and (max-width: 48em) { /* 768px */
  .ui-dialog.ui-dialog-offcanvas {
    width: 100% !important;
  }
  /* When tray is at 100% width stop the body from scrolling */
  .js-tray-open {
    height: 100%;
    overflow-y: hidden;
  }
}
