Chris@18: .layout-builder {
Chris@18:   padding: 1.5em 1.5em 0.5em;
Chris@18:   border: 3px solid #2f91da;
Chris@18:   background-color: #fff;
Chris@18: }
Chris@18: 
Chris@18: .layout-builder__add-section {
Chris@14:   width: 100%;
Chris@18:   margin-bottom: 1.5em;
Chris@14:   padding: 1.5em 0;
Chris@14:   text-align: center;
Chris@18:   outline: 2px dashed #979797;
Chris@18:   background-color: #f7f7f7;
Chris@14: }
Chris@14: 
Chris@18: .layout-builder__link--add {
Chris@18:   padding-left: 24px; /* LTR */
Chris@18:   color: #686868;
Chris@16:   border-bottom: none;
Chris@18:   background: url(../../../misc/icons/787878/plus.svg) transparent top left / 16px 16px no-repeat; /* LTR */
Chris@16: }
Chris@16: 
Chris@18: [dir="rtl"] .layout-builder__link--add {
Chris@18:   padding-right: 24px;
Chris@18:   padding-left: 0;
Chris@18:   background-position-x: right;
Chris@16: }
Chris@16: 
Chris@18: .layout-builder__link--add:hover,
Chris@18: .layout-builder__link--add:active,
Chris@18: .layout-builder__link--add:focus {
Chris@18:   color: #000;
Chris@18:   border-bottom-style: none;
Chris@18: }
Chris@18: 
Chris@18: .layout-builder__section {
Chris@14:   margin-bottom: 1.5em;
Chris@14: }
Chris@14: 
Chris@18: .layout-builder__section .ui-sortable-helper {
Chris@18:   outline: 2px solid #f7f7f7;
Chris@16:   background-color: #fff;
Chris@16: }
Chris@16: 
Chris@18: .layout-builder__section .ui-state-drop {
Chris@16:   margin: 20px;
Chris@16:   padding: 30px;
Chris@18:   outline: 2px dashed #fedb60;
Chris@18:   background-color: #ffd;
Chris@16: }
Chris@16: 
Chris@18: .layout-builder__region {
Chris@14:   outline: 2px dashed #2f91da;
Chris@14: }
Chris@14: 
Chris@18: .layout-builder__add-block {
Chris@16:   padding: 1.5em 0;
Chris@14:   text-align: center;
Chris@18:   background-color: #eff6fc;
Chris@14: }
Chris@14: 
Chris@18: .layout-builder__link--remove {
Chris@18:   position: relative;
Chris@18:   z-index: 2;
Chris@18:   display: inline-block;
Chris@18:   box-sizing: border-box;
Chris@18:   width: 26px;
Chris@18:   height: 26px;
Chris@18:   margin-right: 6px; /* LTR */
Chris@18:   margin-left: -10px; /* LTR */
Chris@18:   padding: 0;
Chris@18:   white-space: nowrap;
Chris@18:   text-indent: -9999px;
Chris@18:   border: 1px solid #ccc;
Chris@18:   border-radius: 26px;
Chris@18:   background: url(../../../misc/icons/bebebe/ex.svg) #fff center center / 16px 16px no-repeat;
Chris@18:   font-size: 1rem;
Chris@16: }
Chris@16: 
Chris@18: [dir="rtl"] .layout-builder__link--remove {
Chris@18:   margin-right: -10px;
Chris@18:   margin-left: 6px;
Chris@14: }
Chris@14: 
Chris@18: .layout-builder__link--remove:hover {
Chris@14:   background-image: url(../../../misc/icons/787878/ex.svg);
Chris@14: }
Chris@14: 
Chris@18: .layout-builder-block {
Chris@18:   padding: 1.5em;
Chris@18:   cursor: move;
Chris@18: }
Chris@18: 
Chris@18: .layout-builder-block [tabindex="-1"] {
Chris@18:   pointer-events: none;
Chris@18: }
Chris@18: 
Chris@18: .layout-builder__message .messages {
Chris@18:   background-repeat: no-repeat;
Chris@18: }
Chris@18: .layout-builder__message--defaults .messages {
Chris@18:   background-image: url("../../../misc/icons/73b355/globe.svg");
Chris@18: }
Chris@18: .layout-builder__message--overrides .messages {
Chris@18:   background-image: url("../../../misc/icons/73b355/location.svg");
Chris@18: }
Chris@18: 
Chris@18: .layout-builder-block__content-preview-placeholder-label {
Chris@18:   margin: 0;
Chris@18:   text-align: center;
Chris@18:   font-size: 1.429em;
Chris@18:   line-height: 1.4;
Chris@18: }
Chris@18: 
Chris@18: .layout-builder--content-preview-disabled .layout-builder-block {
Chris@18:   margin: 0;
Chris@18:   border-bottom: 2px dashed #979797;
Chris@18: }
Chris@18: 
Chris@14: #drupal-off-canvas .layout-selection li {
Chris@14:   display: block;
Chris@14:   padding-bottom: 1em;
Chris@14: }
Chris@14: 
Chris@14: #drupal-off-canvas .layout-selection li a {
Chris@14:   display: block;
Chris@14:   padding-top: 0.55em;
Chris@14: }
Chris@17: 
Chris@17: #drupal-off-canvas .inline-block-create-button {
Chris@17:   display: block;
Chris@17:   padding: 24px;
Chris@17:   padding-left: 44px;
Chris@18:   color: #eee;
Chris@18:   border-bottom: 1px solid #333;
Chris@18:   background: url(../../../misc/icons/bebebe/plus.svg) transparent 16px no-repeat;
Chris@17:   font-size: 16px;
Chris@17: }
Chris@17: 
Chris@17: #drupal-off-canvas .inline-block-create-button,
Chris@17: #drupal-off-canvas .inline-block-list__item {
Chris@17:   margin: 0 -20px;
Chris@17:   background-color: #444;
Chris@17: }
Chris@17: 
Chris@17: #drupal-off-canvas .inline-block-create-button:hover,
Chris@17: #drupal-off-canvas .inline-block-list__item:hover {
Chris@17:   background-color: #333;
Chris@17: }
Chris@17: 
Chris@17: #drupal-off-canvas .inline-block-list {
Chris@17:   margin-bottom: 15px;
Chris@17: }
Chris@17: 
Chris@17: #drupal-off-canvas .inline-block-list__item {
Chris@17:   display: block;
Chris@17:   padding: 15px 0 15px 25px;
Chris@17: }
Chris@18: 
Chris@18: .layout-builder__add-section.is-layout-builder-highlighted {
Chris@18:   margin-bottom: calc(1.5em - 8px);
Chris@18:   outline: none;
Chris@18: }
Chris@18: .layout-builder__layout.is-layout-builder-highlighted,
Chris@18: .layout-builder-block.is-layout-builder-highlighted,
Chris@18: .layout-builder__add-block.is-layout-builder-highlighted {
Chris@18:   position: relative;
Chris@18:   z-index: 1;
Chris@18:   margin: -4px -2px;
Chris@18: }
Chris@18: .layout-builder__add-block.is-layout-builder-highlighted,
Chris@18: .layout-builder__add-section.is-layout-builder-highlighted,
Chris@18: .layout-builder__layout.is-layout-builder-highlighted:before,
Chris@18: .layout-builder__layout.is-layout-builder-highlighted,
Chris@18: .layout-builder-block.is-layout-builder-highlighted {
Chris@18:   border: 4px solid #000;
Chris@18: }
Chris@18: 
Chris@18: /* Highlight the active block in the Move Block dialog. */
Chris@18: #drupal-off-canvas .layout-builder-components-table__block-label--current {
Chris@18:   padding-left: 17px;
Chris@18:   border-left: solid 5px;
Chris@18: }
Chris@18: 
Chris@18: /**
Chris@18:  * @todo remove in https://www.drupal.org/project/drupal/issues/3042127
Chris@18:  *   This rule ensures the row weight dropdowns in the Move Block dialog
Chris@18:  *   maintain the background color of their container when they are hovered
Chris@18:  *   over or are inside the active row.
Chris@18:  */
Chris@18: #drupal-off-canvas .layout-builder-components-table__row .form-item {
Chris@18:   background-color: transparent;
Chris@18: }
Chris@18: 
Chris@18: .layout-builder__region-label,
Chris@18: .layout-builder__section-label {
Chris@18:   display: none;
Chris@18: }
Chris@18: 
Chris@18: .layout-builder--move-blocks-active .layout-builder__region-label {
Chris@18:   display: block;
Chris@18: }
Chris@18: 
Chris@18: .layout-builder--move-blocks-active .layout-builder__section-label {
Chris@18:   display: inline;
Chris@18: }
Chris@18: 
Chris@18: .layout__region-info {
Chris@18:   padding: 0.5em;
Chris@18:   text-align: center;
Chris@18:   border-bottom: 2px dashed #979797;
Chris@18: }
Chris@18: 
Chris@18: /**
Chris@18:  * Remove "You have unsaved changes" warning because Layout Builder always has
Chris@18:  * unsaved changes until "Save layout" is submitted.
Chris@18:  * @todo create issue for todo.
Chris@18:  */
Chris@18: .layout-builder-components-table .tabledrag-changed-warning {
Chris@18:   display: none !important;
Chris@18: }