.comments-drawer-paper {
  overflow: hidden;

  &:not(.dock-bottom) {
    width: 40vw;
    max-width: 90vw;
    min-width: 320px;
  }

  &.dock-bottom {
    width: 100%;
    max-width: none;
    min-width: 0;
    max-height: 90vh;
    min-height: 200px;
  }
}

.comments-undocked-root {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--background-default);
}

.comments-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  > .comments-resize-handle {
    position: absolute;
    z-index: 2;
    touch-action: none;

    &::after {
      content: '';
      position: absolute;
      background-color: transparent;
      transition: background-color 0.15s ease;
    }

    &:hover::after,
    &:active::after {
      background-color: var(--border-hover);
    }
  }

  &.dock-right > .comments-resize-handle {
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;

    &::after {
      top: 0;
      left: 0;
      width: 2px;
      height: 100%;
    }
  }

  &.dock-left > .comments-resize-handle {
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;

    &::after {
      top: 0;
      right: 0;
      width: 2px;
      height: 100%;
    }
  }

  &.dock-bottom > .comments-resize-handle {
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    cursor: row-resize;

    &::after {
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
    }
  }

  > .header {
    display: flex;
    align-items: center;
    padding: var(--spacing-100);
    border-bottom: 1px solid var(--border-subtle-1);

    > .title {
      @include tag-medium-1;
      color: var(--text-secondary);
      margin-left: var(--spacing-100);
    }

    > .actions {
      display: flex;
      align-items: center;
      margin-left: auto;
      gap: var(--spacing-100);

      .edit-button {
        margin-right: 0;
      }
    }
  }

  > .body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-200);
    background-color: var(--background-default);
  }
}

@media (max-width: 1366px) {
  .comments-drawer-paper:not(.dock-bottom) {
    width: 40vw;
  }
}

@media (max-width: 768px) {
  .comments-drawer-paper:not(.dock-bottom) {
    width: 60vw;
  }
}

@media (max-width: 767px) {
  .comments-drawer-paper:not(.dock-bottom) {
    width: 90vw;
  }
}