@reference 'tailwindcss';

:host {
  --emr-comment-editor-bg: transparent;
  --emr-comment-editor-content-max-height: 9999px;

  display: block;
  position: relative;
  overflow: hidden;
  background: var(--emr-comment-editor-bg);

  .floating-menu {
    box-shadow: theme(--shadow-sm);
    background: white;
    padding-top: calc(var(--spacing) * 1.5);
    padding-bottom: calc(var(--spacing) * 1.5);
    padding-inline-start: calc(var(--spacing) * 2);
    padding-inline-end: calc(var(--spacing) * 2);
    border: 1px solid var(--color-border);
    border-radius: calc(infinity * 1px);

    .button {
      &:hover {
        color: var(--color-primary);
        border-radius: calc(infinity * 1px);
      }

      mat-icon {
        width: calc(var(--spacing) * 6);
        height: calc(var(--spacing) * 6);
        font-size: theme(--text-xl);
        line-height: 1.25;
      }

      &:disabled {
        pointer-events: none;
        opacity: 70%;
      }
    }
  }

  .content {
    position: absolute;
    inset: 0;
    height: calc(var(--spacing) * 14);

    ::ng-deep {
      .tiptap {
        padding: calc(var(--spacing) * 4);
        min-height: calc(var(--spacing) * 10);

        &:focus {
          outline: none;
        }

        div[data-youtube-video] {
          cursor: move;
          background: var(--color-neutral-100);
          padding: calc(var(--spacing) * 6);
          display: flex;
          align-items: center;
          justify-content: center;

          iframe {
            width: 100%;
            aspect-ratio: 16 / 9;
            border: none;
            display: block;
            min-height: 200px;
            min-width: 200px;
            outline: none;
          }

          &.ProseMirror-selectednode {
            iframe {
              outline: var(--sys-tertiary) solid 4px;
              transition-property: all;
              transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
              transition-duration: 150ms;
            }
          }
        }

        img {
          display: block;
          height: auto;
          margin: calc(var(--spacing) * 6) 0;
          max-width: 100%;

          &.ProseMirror-selectednode {
            outline: var(--sys-tertiary) solid 4px;
            transition-property: all;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 150ms;
          }
        }

        p.is-editor-empty:first-child {
          &::before {
            content: attr(data-placeholder);
            color: var(--color-neutral-500);
            float: left;
            height: 0;
            pointer-events: none;
            font-size: 14px;
          }
        }

        &.ProseMirror-focused {
          p.is-editor-empty:first-child {
            &::before {
              content: none;
            }
          }
        }

        p.is-empty::before {
          content: attr(data-placeholder);
          color: var(--color-neutral-500);
          float: left;
          height: 0;
          pointer-events: none;
          font-size: 14px;
        }
      }

      p,
      pre {
        &:first-child {
          margin-top: 0;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  &.full-view {
    .content {
      position: static;
      height: auto;
      min-height: calc(var(--spacing) * 12);
      max-height: var(--emr-comment-editor-content-max-height);
      overflow-y: auto;
    }
  }

  .footer {
    height: calc(var(--spacing) * 14);
    padding: 0 calc(var(--spacing) * 2.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .toolbar {
    border-bottom: 1px solid var(--color-border);
    height: calc(var(--spacing) * 14);
    padding: 0 calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .button,
  ::ng-deep .button {
    &.active {
      background: var(--color-neutral-200);
    }
  }
}

:host-context(html.dark) {
  .button,
  ::ng-deep .button {
    &.active {
      background: var(--color-neutral-650);
      color: var(--color-neutral-200);
    }
  }
}
