/**
 * @file
 * Layout Builder UI styling.
 */

@import '../base/variables.pcss.css';

section.css-grid-layout {
  /* This class can be applied via Layout Builder Styles on sections */
  &.css-grid-border {
    background-color: var(--color--gray-50);
    gap: 1px;
    & .layout-inner-content {
      padding: 1rem;
      background-color: var(--color-light-grey);
    }
  }

  /* This is needed to let the label and textarea span the whole height
     of the container */
  & .intervention-block {
    height: 100%;
    & > div,
    & article.exercise-components,
    & .ex-component-textarea {
      height: 100%;
    }
  }

  & .ex-component-textarea {
    display: grid;
    align-content: space-between;
  }

  & .hide-ex-component-label {
    & .title {
      display: none;
    }
  }
}

/* Some fixes for the Layout Builder edit mode */
#drupal-off-canvas {
  & input[type='submit'].button {
    padding: 4px;
  }

  #css-grid-columns-wrapper .form-actions,
  #css-grid-rows-wrapper .form-actions {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}