/* ==========================================================================
   Layout builder
   ========================================================================== */
.glb-body {
  .content-header {
    background: none;
  }
}
.glb-region-sticky__items__inner {
  &.form-wrapper {
    margin-bottom: 0;
  }
}
.layout-builder__link--remove {
  top: -19px;
  width: 19px;
  height: 19px;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */
.dialog-off-canvas-main-canvas {
  transition: padding-right .3s, padding-left .3s, padding-top .1s;
}
#drupal-off-canvas-wrapper {
  z-index: 1000;
  border-radius: 0;
  background: #fff;

  .ui-dialog-content div:not([data-drupal-ck-style-fence] *) {
    .dataviz-css-editor div,
    .dataviz-js-editor div,
    .dataviz-html-editor div {
      color: #ccc;
    }
  }
  .layout-icon__region {
    fill: #ccc;
  }
}
.ui-widget.ui-dialog.ui-dialog-off-canvas {
  overflow: hidden;

  .js-hide,
  .form-item-settings-label,
  .js-filter-wrapper {
    display: none;
  }
  .js-form-type-search {
    display: none;
  }
  .block-categories {
    li {
      list-style: none;
    }
    a {
      display: block;
    }
  }
  .fieldset-page-selection {
    > .fieldset-wrapper {
      margin-top: -38px;
    }
  }
  .form-item-settings-selection-remove,
  .glb-claro-details[open] > .glb-claro-details__summary {
    display: none;
  }

  /* Html code
     ========================================================================== */
  .form-item-settings-block-form-field-htmlcode-0-value,
  .form-item-settings-block-form-field-jscode-0-value {
    .form-textarea {
      display: none;
    }
  }
}

/* ==========================================================================
   Form
   ========================================================================== */
.glb-canvas-form {
  margin-bottom: 0;
}
.glb-canvas-form__actions {
  padding-bottom: var(--space-xl);
}

/* ==========================================================================
   Modal
   ========================================================================== */
.ui-dialog-off-canvas.ui-dialog-position-side {
  width: 782px !important;
}

/* ==========================================================================
   Direct Add block
   ========================================================================== */
.node-body .layout-builder__add-block {
  a:not(.btn) {
    text-decoration: none;
  }
}
.js .layout-builder__add-block a.layout-builder__direct-add__toggle {
  display: inline;
}
.layout-builder__direct-add__toggle {
  padding-left: 1.3em;
  border-bottom: none;
  color: #686868;
  background: url(../../../../../../core/misc/icons/787878/plus.svg) transparent center left / 1em no-repeat;

  &:before {
    content: none;
  }
}
.layout-builder__direct-add__list {
  width: 100%;
  max-width: 50vw;
}


/* ==========================================================================
   Edit links
   ========================================================================== */
.js-layout-builder-block.contextual-region {
  .contextual {
    .trigger {
      display: none;

    /* Force display contextual links on block hover */
    &:not(.visually-hidden) + .contextual-links {
      display: flex;
    }
      + .contextual-links {
        padding: 0;
        border-radius: 4px;
        overflow: hidden;

        li {
          background: none;
        }
        a {
          margin: 0;
          font-size: 0;
          padding: 12px;
          background: none;
          border: 1px solid #fff;
          border-radius: var(--gin-border-xs);

          &:after {
            content: "";
            display: block;
            width: 16px;
            height: 16px;
            background-repeat: no-repeat;
          }

          &[href^="/layout_builder/update/"] {
            &:after {
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg%3E%3Cpath fill='%23bebebe' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3E%3Crect fill='%23bebebe' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3E%3Cpath fill='%23bebebe' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3E%3C/g%3E%3C/svg%3E%0A");
            }
          }
          &[href^="/layout_builder/move/"] {
            &:after {
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23bebebe' d='M14.904 7.753l-2.373-2.372c-.291-.292-.529-.193-.529.22v1.399h-3v-3h1.398c.414 0 .512-.239.221-.53l-2.371-2.372c-.137-.136-.36-.136-.497 0l-2.372 2.372c-.292.292-.193.53.22.53h1.399v3h-3v-1.369c0-.413-.239-.511-.53-.22l-2.372 2.372c-.136.136-.136.359 0 .494l2.372 2.372c.291.292.53.192.53-.219v-1.43h3v3h-1.4c-.413 0-.511.238-.22.529l2.374 2.373c.137.137.36.137.495 0l2.373-2.373c.29-.291.19-.529-.222-.529h-1.398v-3h3v1.4c0 .412.238.511.529.219l2.373-2.371c.137-.137.137-.359 0-.495z'/%3E%3C/svg%3E%0A");
            }
          }
          &[href^="/layout_builder/remove/"] {
            &:after {
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23bebebe' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3E%3C/svg%3E%0A");
            }
          }

          &:focus {
            outline: 0;
            box-shadow: none;
          }
          &:hover {
            background-color: #fff;
            border-color: var(--gin-color-primary);
          }
        }
      }
    }
  }

  .webform-submission-form {
    .contextual {
      display: none;
    }
  }
}