/* re-skin the right-hand off-canvas sidebar to be light-themed.. *shudders* */
/* remove off-canvas wrapper box-shadow and color swap wrapper */
.ui-dialog.ui-dialog-off-canvas {
  background-color: #fff;
  color: var(--dark);
  box-shadow: none;
  /* border-left: 1px solid var(--primary) !important; */
  border: none;
}
/* off-canvas and modal title bars */
.ui-dialog-titlebar,
.ui-dialog-titlebar .ui-dialog-title {
  background-color: var(--primary) !important;
  color: #fff !important;
  border-bottom: 1px solid var(--primary) !important;
}

#drupal-off-canvas-wrapper .ui-dialog-titlebar {
  padding: var(--off-canvas-title-padding) 3rem;
}

#drupal-off-canvas-wrapper
{
  --off-canvas-wrapper-box-shadow: none;
  background-color: #fff;
  border-inline-start: none;
  color: var(--dark);
}

#drupal-off-canvas-wrapper div.moderation-sidebar-primary-tasks {
  padding-bottom: 10px;
}

#drupal-off-canvas-wrapper div.moderation-sidebar-primary-tasks form.moderation-sidebar-quick-transition-form {
  padding-top: 0;
  padding-bottom: 0;
}

#drupal-off-canvas-wrapper .button
{
  background-color: var(--dark);
}

#drupal-off-canvas-wrapper details > summary {
  color: #eee;
  background-color: var(--dark);
}

/* off-canvas background and text color swaps */
#drupal-off-canvas-wrapper *,
#drupal-off-canvas-wrapper *:not(div,input),
#drupal-off-canvas-wrapper .inline-block-create-button,
#drupal-off-canvas-wrapper .inline-block-list__item
{
  background-color: #fff;
  color: var(--dark);
  transition: background-color 1s;
}

#drupal-off-canvas-wrapper input[type="submit"].button--primary
{
  margin-top: 15px;
  color: #fff;
  border: 0;
  background: #277abd;
}

.ui-dialog-off-canvas #drupal-off-canvas-wrapper .moderation-sidebar-link.button--primary:hover,
.ui-dialog-off-canvas #drupal-off-canvas-wrapper .moderation-sidebar-link.button--primary:focus
{
  border: 1px solid #236aaf;
  background: #236aaf;
  color: #fff;
}

#drupal-off-canvas-wrapper label
{
  font-size: 12px;
}

#drupal-off-canvas-wrapper .moderation-sidebar-secondary-tasks {
  padding-top: 20px;
  border-top: 1px solid #7b7b7b;
}

#drupal-off-canvas-wrapper .layout-selection {
  margin-top: 2px;
}

#drupal-off-canvas:not(.drupal-off-canvas-reset) ul li,
#drupal-off-canvas:not(.drupal-off-canvas-reset) ol li
{
    display: block;
    padding: 0.3125rem 0;
    border-bottom: 1px solid #333;
}

#drupal-off-canvas:not(.drupal-off-canvas-reset) ul li:last-child,
#drupal-off-canvas:not(.drupal-off-canvas-reset) ol li:last-child
{
    padding-bottom: 0;
    border-bottom: none;
}

#drupal-off-canvas-wrapper .inline-block-list__item {
    border-bottom: none;
}

#drupal-off-canvas-wrapper a:hover,
#drupal-off-canvas-wrapper .link:hover {
  text-decoration: underline;
}

/* off-canvas layout stroke */
#drupal-off-canvas-wrapper .layout-icon__region {
  stroke: #666;
}

/* off-canvas hover-state swaps */
#drupal-off-canvas-wrapper .inline-block-create-button:hover,
#drupal-off-canvas-wrapper .inline-block-create-button:focus,
#drupal-off-canvas-wrapper .inline-block-list__item:hover,
#drupal-off-canvas-wrapper .inline-block-list__item:focus
{
  text-decoration: none;
  background-color: #ededed;
  transition: 0.8s;
}
/* recude margin during layout selection */
#drupal-off-canvas-wrapper .layout-selection li
{
  padding-bottom: 0;
  border: 0;
}
/* fix coloring on the "move block" panel */
#drupal-off-canvas-wrapper tr:hover td,
#drupal-off-canvas-wrapper tr.drag td,
#drupal-off-canvas-wrapper tr.drag-previous td,
#drupal-off-canvas-wrapper tr.drag-previous:hover td
{
  background: #fff;
}

/* Copied from D9 off-canvas.form.css */
#drupal-off-canvas-wrapper .form-text,
#drupal-off-canvas-wrapper .form-tel,
#drupal-off-canvas-wrapper .form-email,
#drupal-off-canvas-wrapper .form-url,
#drupal-off-canvas-wrapper .form-search,
#drupal-off-canvas-wrapper .form-number,
#drupal-off-canvas-wrapper .form-color,
#drupal-off-canvas-wrapper .form-file,
#drupal-off-canvas-wrapper .form-textarea,
#drupal-off-canvas-wrapper .form-date,
#drupal-off-canvas-wrapper .form-time {
    color: #595959;
    border-color: #333;
    background-color: #eee;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);
}

/* layout builder UI adjustments */
/* modify the display of the content preview checkbox for all screens */
#edit-preview-toggle {
  margin-top: 14px;
}

/* no gutters between elements on the layout editor, this is handled by the layout themselves (the bootstrap columns) */
#layout-builder .layout-builder-block {
  padding: 0;
}

/* remove "Configure Section" link from all layout builder sections */
/*a.layout-builder__link--configure {
  line-height: 0;
  font-size: 0;
  color: transparent;
}*/

/* add a visible X to the "close modal" button */
div.ui-dialog button.ui-dialog-titlebar-close:not(div.ui-dialog.ui-dialog-off-canvas button.ui-dialog-titlebar-close) {
  background-image: url('/themes/custom/clarkwagov/img/icons/x-mark-white.svg') !important;
}

#drupal-off-canvas-wrapper .ui-dialog-titlebar-close::before,
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close::after {
  width: 100%;
}

/* remove the default X icon that keeps coming and going */
.ui-button .ui-icon {
  background-image: none !important;
}

/* remove vertical tabs at the bottom of the layout builder display */
form#node-page-layout-builder-form div.form-type-vertical-tabs {
  display:none;
}

/* fix draggable handle and form layout in the modal for the link list and news inline blocks */
#layout-builder-modal .field--name-field-link-item a.tabledrag-handle .handle,
#layout-builder-modal .field--name-field-news-articles a.tabledrag-handle .handle {
  width: 30px;
  height: 50px;
  margin-left: 20px;
}
#layout-builder-modal .field--name-field-link-item .description,
#layout-builder-modal .field--name-field-news-articles .description {
  display: none;
}
#layout-builder-modal .field--name-field-link-item td {
  padding: 30px 0 5px;
  border-bottom: 1px solid var(--info);
}
#layout-builder-modal .field--name-field-news-articles td {
  padding: 10px;
  border-bottom: 1px solid var(--info);
}

/* wysiwyg editor adjustments */
/* better height for wysiwyg link modal window */
.editor-linkit-dialog #drupal-modal {
  height: 400px !important;
  max-height: 350px !important;
}
/* respect align:center; button */
.align-center {
  text-align:center;
}
/* add margin to images aligned with the media alignment options */
.align-left img {
  margin-right: 1rem !important;
}
.align-right img {
  margin-left: 1rem !important;
}
/* hide "about text formats" link */
.filter-wrapper {
  display:none;
}

@media (min-width: 992px) {
  /* modify the display of the content preview checkbox and the publishing status dropdown*/
  #edit-moderation-state-0 {
    display: flex;
  }
  #edit-moderation-state-0 div {
    margin-top: 0;
    margin-right: 60px;
  }
}