:host {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.titles {
  display: grid;
  column-gap: 10px;
  color: var(--color-gray-888);
}

.list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.add-buttons-wrap {
  display: flex;
  gap: 10px;
  align-self: flex-start;
}

.editor-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;

  app-cmf-chat-editor {
    width: 100%;
  }

  .empty {
    color: var(--color-gray-888);
  }

  app-cmf-object-editor {
    width: 100%;
  }

  &:hover {
    .inline-edit-button {
      visibility: visible;
    }
  }
}

.inline-edit-button {
  visibility: hidden;
}

.cdk-drag-placeholder {
  opacity: 0;
}

:host ::ng-deep .choice-text-message {
  .app-tinymce-card-preview:hover .app-tinymce-preview-actions {
    visibility: visible;
  }

  a.external:any-link {
    color: #0053a0;
    text-decoration: none;
  }

  .app-tinymce-card-preview {
    position: relative;

    overflow: hidden;
    display: inline-flex;
    flex-flow: column nowrap;
    align-items: center;

    width: 155px;
    height: 159px;
    margin: 10px;
    padding: 2px 5px;
    padding-bottom: 30px;
  }

  .app-tinymce-href-preview {
    cursor: pointer;

    position: relative;

    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;

    box-sizing: border-box;
    width: 100%;
    height: 100%;

    font-size: 11px;
    color: black;
    text-decoration: none;

    border-radius: 3px;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);

    transition: all 0.3s ease-in-out;
  }

  .app-tinymce-href-preview:hover {
    box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%);
  }

  .app-tinymce-img-preview-block {
    position: relative;

    display: flex;

    width: 100%;
    height: 65%;

    border-radius: 3px 3px 0 0;
  }

  .app-tinymce-img-preview-block img.d-none {
    display: none;
  }

  .app-tinymce-img-preview-background {
    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
  }

  .app-tinymce-img-preview-background img {
    width: auto;
    height: 100% !important;
  }

  .app-tinymce-file-preview-block {
    z-index: 1;

    width: 100%;
    height: 35%;
    margin: 0 auto;
    padding: 3px 15px 10px;

    color: var(--color-gray-222);

    background: var(--theme-hack-bg-color, #f9f9f9);
  }

  .app-tinymce-file-name-block {
    display: flex;
    flex-direction: row;
    align-items: center;

    height: 50%;

    font-weight: 600;
  }

  .display-contents {
    display: contents !important;
  }

  .remove-file-icon {
    cursor: pointer !important;

    position: absolute;
    z-index: 10;
    top: 3px;
    right: 3px;

    display: none;
    justify-content: center;
  }

  .app-tinymce-file-create-view,
  .app-tinymce-file-name-view {
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-tinymce-file-name-view {
    max-width: calc(100% - 4.22em);
  }

  .app-tinymce-file-create-view {
    height: 50%;
  }

  .app-tinymce-img-preview-size {
    z-index: 1;

    display: flex;
    flex-direction: row;
    place-content: flex-start flex-start;
    align-items: flex-start;

    width: 100%;
    height: 100%;
  }
}

app-cmf-icon,
app-cmf-doodle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}