.editable-group-container {
  display: flex;
  flex-direction: column;
  gap: 16px;

  .editable-container {
    display: flex;
    flex-direction: column;
    gap: 4px;

    .title {
      display: flex;
      align-items: center;

      h6 {
        @include label-small-2;
        margin: 0px;
      }

      .info {
        margin-left: 8px;
        cursor: pointer;
      }
    }
  }
}

.modal-map {
  width: 300px;
  height: 200px;
}

.easy-edit-wrapper {
  cursor: pointer;
  color: var(--text-accent);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 5px;
}

.textarea-code {
  .easy-edit-inline-wrapper .easy-edit-component-wrapper {
    textarea {
      font-family: 'Courier New', Courier, monospace;
      height: 300px;
    }
  }
}

.easy-edit-inline-wrapper {
  .easy-edit-component-wrapper {
    width: 100%;
    display: block;

    input,
    textarea,
    select {
      width: 100%;
    }

    select {
      padding: 8px;
      border-color: var(--border-subtle-2);
      border-radius: var(--radius-100);
    }
  }

  .easy-edit-checkbox-label {
    cursor: pointer;
    margin-bottom: 4px;

    input[type='checkbox'] {
      margin-right: 8px;
    }
  }

  .easy-edit-button-wrapper {
    width: 100%;
    display: flex;
    margin-top: 8px;

    .easy-edit-button {
      padding: 4px 8px;
      cursor: pointer;

      &[name='save'] {
        background-color: var(--button-primary-default);
        color: var(--background-default);
      }

      &[name='cancel'] {
        background-color: var(--button-danger-default);
        color: var(--background-default);
      }

      &:hover {
        opacity: 0.8;
      }
    }
  }
}