.staff-notes--sidebar-container {
  width: 100%;
  padding: .5rem;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .25rem;
  background-color: var(--surface-subtle);
  position: relative;
  /*outline: solid 3px var(--primary-400);
  transition: outline 500ms linear;*/
  
  .staff-notes--content-container {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    width: 100%;

    p {
      width: 100%;
      font-size: var(--rem-13);
      line-height: var(--rem-21);
      letter-spacing: 0;
      color: var(--text-body);
      padding: 0;
      margin-inline: 8px 4px;
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  
    span.icon[data-name="note-sticky"] {
      margin-top: 0.125rem;
    }
  }

  &[data-needs-expanding="false"] > .staff-notes--view-more-button {
    display: none;
  }

  &[data-needs-expanding="true"][data-expanded="true"] > div > p {
    -webkit-line-clamp: unset;
    overflow: visible;
    display: block;
  }

  &[data-needs-expanding="true"][data-expanded="true"] > .staff-notes--view-more-button > span.icon {
    rotate: 90deg;
  }

  .staff-notes--view-more-button {
    padding: 0;
    padding-left: 1.5rem;
    background-color: transparent;
    justify-content: flex-start;

    span.icon {
      transition: rotate 200ms ease-in;
    }

    span.text { 
      font-size: var(--rem-12);
      line-height: var(--rem-21);
      letter-spacing: 0;
      font-variation-settings: 'wght' var(--text-medium);
      color: var(--text-action-neutral-tertiary);
    }
  }
}

turbo-frame#details-staff-note {
  width: 100%;
}

.staff-notes--warning-text {
  width: 100%;
  font-size: var(--rem-14);
  line-height: var(--rem-20);
  letter-spacing: 0;
  color: var(--text-body);
}