@import 'variables';

.editable-container {
  display: flex;
  font-size: 16px;
  color: $text-secondary;

  &:hover {
   .edit-link {
     opacity: 1;
   }
  }

  .edit-link {
    opacity: 0;
    text-decoration: none;

    &.no-value {
      opacity: 1;
    }
  }

  .editable-text {
    flex-grow: 0.1;
    word-break: break-word;

    // React-Markdown wraps editable text with a paragraph
    > p {
      margin: 0;
    }
  }

  .editable-textarea {
    padding: 0;
    outline: none;
    border: 0;
    background: $brand-color-1;
    caret-color: $brand-color-4;
  }

  .editable-textarea:focus-within {
    outline: none;
    background: $white;
  }
}
