/**
 * @file
 * Admin Overrides
 *
 * This file is to override Drupal admin theme defaults for the Claro Theme.
 */

@media screen and (min-width: 61rem) {
  form .layout-region--node-main,
  form .layout-region--node-footer{
    width: calc(100% - 18.5rem);
    padding-right: 0.5rem;
  }

  form .layout-region--node-secondary {
    width: 18.5rem;
    margin-top: 0.8rem;
  }

  form .layout-region--node-main .layout-region__content,
  form .layout-region--node-footer .layout-region__content {
    max-width: 100%;
  }
}

/* Fact sheets field */
.field--widget-entity-reference-paragraphs em {
  display: none;
}

.field--widget-entity-reference-paragraphs .description {
  color: #55565b;
  font-size: 0.79rem;
}

.field--widget-entity-reference-paragraphs tr td > div {
  max-width: 95%;
}

/* Make gin theme work with layout builder iframe better. */
body.gin--layout-builder-iframe-modal {
  padding-left: 0 !important;
  font-size: 18px;
}

html body.gin--vertical-toolbar.gin--layout-builder-iframe-modal {
  padding-left: 0 !important;
}

html body.gin--vertical-toolbar.gin--layout-builder-iframe-modal .field-group-tabs-wrapper .draggable,
html body.gin--vertical-toolbar.gin--layout-builder-iframe-modal .field-group-tabs-wrapper .draggable td *:not(div.form-wrapper) > div.form-wrapper,
html body.gin--vertical-toolbar.gin--layout-builder-iframe-modal .draggable,
html body.gin--vertical-toolbar.gin--layout-builder-iframe-modal .draggable td *:not(div.form-wrapper) > div.form-wrapper {
  width: calc(100% - 45px) !important;
}

body.gin--layout-builder-iframe-modal .form-item {
  margin: 1.25rem 0;
}
body.gin--layout-builder-iframe-modal .form-item label:not(.option) {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 14px;
}

body.gin--layout-builder-iframe-modal .form-item__description {
  font-size: 12px;
  margin: 0.5rem 0 0 0;
}

/* Mini Catalog Layout Builder tweak. */
#mini-catalog-settings {
  margin-top: 2rem;
}
#mini-catalog-settings .horizontal-tabs-panes {
  background: #eee;
}
.gin--dark-mode #mini-catalog-settings .horizontal-tabs-panes {
  background: inherit;
}
#mini-catalog-settings .horizontal-tabs-panes .horizontal-tabs-pane {
  padding: 0 1rem;
}
#mini-catalog-settings li.horizontal-tab-button a {
  font-size: 16px;
}
#mini-catalog-settings span.file {
  color: var(--gin-color-text);
  line-height: var(--input-line-height);
  padding: calc(var(--input-padding-vertical) - 1px) var(--input-padding-horizontal);
  min-height: calc(var(--input-padding-vertical) * 2 + var(--input-line-height));
  background-color: var(--gin-bg-input);
  border: 1px solid var(--gin-border-color-form-element);
  border-radius: var(--gin-border-m);
  box-sizing: border-box;
  transition: var(--gin-transition);
}
.gin--dark-mode #mini-catalog-settings .form-element--type-select {
  background-image: none;
}

/* Set Color Box block admin page color for Gin theme */
.filter-guidelines .filter-tips li {
  color: inherit;
}

.form-item__description .item-list li {
  color: inherit;
}

/* Set CKEditor color for li elements in Gin theme */
.ck .ck-content li{
  color: inherit;
}

/* Affects only links the filter already touches */
a.underline {
  text-decoration: underline 1.25px;
  text-underline-offset: 0.125em;
}

/* Homepage Teaser custom block: Hides the Filter tips help text for formatted fields */
.filter-guidelines .filter-tips {
  display: none;
}