.erl-field {
  // Overlay
  .layout-radio-item.active {
    background: transparent;
  }
}

// Disabled
.erl-field .erl-disabled-items,
.erl-field .erl-disabled-items.form-item.form-wrapper {
  padding: var(--gin-spacing-m);
  margin-block-end: -6rem;
  background: #f1f1f3;
  border-radius: var(--gin-border-m);

  .gin--dark-mode & {
    background: var(--gin-bg-layer2);
  }

  &, &:hover, &:active {
    border: 0 none;
  }

  .fieldset__label {
    padding-block: var(--gin-spacing-m) var(--gin-spacing-l);
    padding-inline: 0;
  }

  &__description {
    font-size: var(--gin-font-size-s);
    color: #999;
  }
}

// Disabled items wrapper
.erl-disabled-items > .fieldset__wrapper {
  margin: 0;
}

// Add content
.erl-field .erl-add-content {
  &:focus {
    outline: none;
    box-shadow: none;
  }
}

// Edit / Remove
.erl-field .erl-actions .erl-edit,
.erl-field .erl-actions .erl-remove {
  &, &:hover {
    box-shadow: none;
    border-color: transparent !important;
    border-radius: 50%;
  }
}

// Add section button
.erl-field .erl-add-section,
.erl-field .erl-add-content--single button {
  position: static;
  display: block;
  width: 100%;
  color: var(--gin-color-primary);
  line-height: 1.3;
  background: var(--gin-bg-item-hover);
  padding-block: var(--gin-spacing-m) 34px;
  padding-inline: var(--gin-spacing-m);
  border: 1px dashed var(--gin-color-primary);
  border-radius: var(--gin-border-m);
  transform: none;

  &,
  &:hover,
  &:active {
    text-decoration: none;
  }

  &:hover,
  &:active {
    color: var(--gin-color-primary-hover);
    background: var(--gin-color-primary-light);
  }
}

.erl-field {
  .erl-item:last-of-type > .erl-add-content--single {
    opacity: 1;
  }

  .erl-add-content--single {
    button {
      .icon {
        margin-inline-end: var(--gin-spacing-xs);
      }
    }
  }

  .layout-radio-item {
    > div {
      display: flex;
      align-items: center;
    }

    .form-item {
      margin-inline-start: var(--gin-spacing-xs);
    }

    &.active {
      outline: var(--gin-border-xs) solid var(--gin-color-focus);
    }
  }
}

.erl-layout-region:hover button.erl-add-content__toggle {
  opacity: 1;
}

// ERL overlay
.erl-overlay {
  .erl-form {
    overflow-x: hidden;
    overflow-y: visible;
    max-height: 85vh !important;
  }
}

// ERL overlay loader
.erl-overlay.erl-loading div.loading {
  border-radius: 6px;

  .gin--dark-mode & {
    background: rgba(0, 0, 0, .3);
  }
}

// Disabled item
.erl-disabled-wrapper .erl-item {
  border-color: #fff;

  &:not(:last-of-type) {
    margin-block-end: var(--gin-spacing-m);
  }
}

// Disabled description position
.erl-disabled-wrapper .erl-disabled-items__description {
  inset-block-start: var(--gin-spacing-m);
}

// Basic item styles
.erl-item {
  label.paragraph-type-label,
  label.paragraph-type--label {
    margin: -1px;
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 50%;
    transform: translate(-50%);
    border: 0 none;
    font-style: normal;
    color: var(--gin-color-text-light);
    opacity: .75;
  }

  .layout-controls {
    opacity: 1;
    position: absolute;
    inset-inline-start: var(--gin-spacing-xxs);
    inset-block-start: var(--gin-spacing-xs);
  }

  .paragraph {
    .field {
      line-height: 1.5;
      margin: .5em 0;
    }

    .field--name-field-title {
      font-weight: var(--gin-font-weight-heavy);
    }

    .field--type-image {
      max-height: 400px;
      overflow: hidden;
    }

    .field--name-field-paragraphs {
      display: flex;
      flex-wrap: wrap;

      .field__item {
        flex-basis: 100%;
        margin-inline-end: var(--gin-spacing-xs);
      }
    }
  }
}

// Actions
.erl-item .erl-actions {
  visibility: visible;
  position: absolute;
  inset-inline-end: var(--gin-spacing-xxs);
  inset-block-start: var(--gin-spacing-xs);
}

// Form wrapper
.erl-layout.erl-item.form-wrapper {
  &:hover > button.erl-add-content__toggle,
  &:hover > button.layout-paragraphs-add-content__toggle {
    opacity: 1;
  }

  .erl-actions input.erl-edit,
  .erl-actions input.erl-remove {
    opacity: .75;

    &:hover {
      opacity: 1;
    }
  }
}