/**
 * Layout Builder - Choose Block Panel Styling
 * Styles for the "Add Block" off-canvas panel
 */

/* ========================================
   Create Content Block Button
   ======================================== */

.layout-builder-choose-block-panel .inline-block-create-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.75rem 1.5rem 0.75rem 3rem !important;
  background: var(--background-primary) !important;
  color: var(--white) !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  margin: 1rem 0 !important;
  float: right;
}

.layout-builder-choose-block-panel .inline-block-create-button:hover {
  background: #19463c !important;
}

/* Wrapper div for Create Content Block button */
.layout-builder-choose-block-panel .inline-block-create-wrapper {
  display: flex !important;
  justify-content: flex-end !important;
  margin-bottom: 1rem !important;
}

.layout-builder-choose-block-panel .inline-block-create-wrapper .inline-block-create-button {
  margin-bottom: 0 !important;
}


body #drupal-off-canvas.layout-builder-choose-block-panel>div:not(.ui-dialog-titlebar):not(.form-actions) {
  padding: 0 !important;
}

#drupal-off-canvas.layout-builder-choose-block-panel.ui-dialog-content .js-form-item {
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

#drupal-off-canvas.layout-builder-choose-block-panel.ui-dialog-content .js-form-item input[type="search"] {
  border: 1px solid var(--stroke-default);
  width: 100% !important;
  border-radius: 0px !important;
  height: 40px !important;
}

#drupal-off-canvas.layout-builder-choose-block-panel.ui-dialog-content .js-form-item input[type="search"]:focus,
#drupal-off-canvas.layout-builder-choose-block-panel.ui-dialog-content .js-form-item input[type="search"]:hover {
  border: 1px solid var(--background-primary) !important;
}

#drupal-off-canvas.layout-builder-choose-block-panel details {
  margin: 10px 0 !important;
  padding: 16px 16px 0 !important;
}

#drupal-off-canvas.layout-builder-choose-block-panel details[open] summary,
#drupal-off-canvas.layout-builder-choose-block-panel details summary {
  margin-bottom: 0 !important;
}

#drupal-off-canvas.layout-builder-choose-block-panel .block-categories,
#drupal-off-canvas.layout-builder-choose-block-panel .js-layout-builder-categories,
#drupal-off-canvas.layout-builder-choose-block-panel div:not(#drupal-off-canvas.layout-builder-choose-block-panel):not(form) {
  overflow: auto !important;
  padding-right: 0.5rem !important;
}

.layout-builder-configure-block .form-item {
  margin-top: 0 !important;
}


/* ========================================
   Configure Block Actions Wrapper
   ======================================== */

#layout-builder-modal .configure-block-actions-wrapper,
#drupal-off-canvas .configure-block-actions-wrapper,
.layout-builder-add-block .configure-block-actions-wrapper {
  display: flex !important;
  justify-content: flex-end !important;
}

#drupal-off-canvas summary,
#drupal-off-canvas-wrapper details{
  font-weight: 600;
  color: #002823;
  cursor: pointer;
  margin: -16px -16px 16px -16px;
  padding: 16px;
  background-color: #ffffff;
  border-radius: 6px 6px 0 0;
  transition: background-color 0.2s ease;
}

#drupal-off-canvas summary:hover {
  background-color: #f5f5f5;
}

#drupal-off-canvas details {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
  background-color: #f9f9f9;
}
#drupal-off-canvas-wrapper details a{
  color: #85bef4 !important;
  font-size: 16px !important;
  font-weight: normal !important;
}

#drupal-off-canvas-wrapper details a:hover {
  background-color: transparent !important;
}