src/components/Note/Note.scss
@import '../../constants/styles';
@import '../../constants/note';

.Note {
  @include button-reset;
  display: block;
  text-align: start;
  border-radius: 4px;
  box-shadow: 0px 0px 3px 0px var(--note-box-shadow);
  margin-bottom: 8px;
  margin-inline-start: 2px;
  background: var(--component-background);
  cursor: pointer;
  position: relative;

  &.unread {
    border: 1.2px solid $pdftron-blue;
  }

  &.expanded {
    box-shadow: 0px 4px 16px var(--note-box-shadow-expanded), 0px 0px 4px 0px var(--note-box-shadow);
  }

  &.is-multi-selected {
    box-shadow: 0px 4px 16px rgba(134, 142, 150, 0.24), 0px 0px 4px 0px var(--note-box-shadow);
  }

  &.disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  .note-button {
    position: absolute;
    width: 100%;
    height: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
  }

  .mark-all-read-button {
    background: $pdftron-blue;
    text-align: center;
    color: white;
    height: 16px;
    font-size: 12px;
    width: 100%;
    border-radius: 0;
  }

  .divider {
    height: 1px;
    width: 100%;
    background: var(--divider);
  }

  .reply-divider {
    background: var(--reply-divider);
    height: 1px;
    width: 100%;
  }

  .replies {
    margin-inline-start: 52px;
    padding-bottom: 12px;
  }

  .reply {
    padding-inline-start: 12px;
    padding-bottom: 24px;
    border-inline-start: 1px solid var(--reply-divider);

    &:last-of-type {
      padding-bottom: 0px;
    }
  }

  .group-section {
    margin-inline-start: 52px;
    padding-bottom: 12px;
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    padding-inline-end: 12px;

    &.modular-ui {
      .group-child {
        &:hover {
          border: none;
          // This is a way to add the border without changing the size of the element
          box-shadow: inset 0 0 0 1px var(--blue-6);
          background: var(--faded-component-background);
          border-radius: 4px;
        }
      }
    }
  }

  .text-button {
    color: var(--secondary-button-text);
    display: flex;
    position: relative;
    width: auto;
    height: auto;
    flex-direction: row-reverse;
    justify-content: flex-end;

    .Icon {
      color: var(--secondary-button-text);
      height: 20px;
      width: 20px;
      display: flex;
      justify-content: center;
      align-items: center;

      svg {
        height: 14px;
        width: 14px;
      }
    }
  }

  .group-child {
    position: relative;
    width: auto;
    height: auto;
    display: block;
    text-align: start;
    &:hover {
      background: var(--view-header-button-hover);
    }

    padding-top: 4px;
    padding-bottom: 4px;

    .NoteContent {
      padding-bottom: 0px;
    }
  }

  &:focus {
    outline: none;
  }

  &:focus-visible {
    outline: var(--focus-visible-outline);
  }
}
