@use '@carbon/layout';
@use '@openmrs/esm-styleguide/src/vars' as *;

.notesContainer {
  margin: layout.$spacing-04;
  padding-bottom: layout.$spacing-04;
}

.notesContainerHeader {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: layout.$spacing-05;
  margin-bottom: layout.$spacing-02;
}

.notesContainerTitle {
  font-weight: 600;
  font-size: layout.$spacing-05;
  color: #393939;
}

.noteTile {
  padding: layout.$spacing-04;
  margin-bottom: layout.$spacing-04;
  background-color: $ui-01;
}

.noteHeader {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.noteProviderRole {
  flex-grow: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: $text-02;
}

.noteBody {
  font-size: 1rem;
  color: $text-02;
  white-space: pre-wrap;
}

.noteDateAndTime {
  font-size: layout.$spacing-04;
  color: $text-02;
}

.noteProviderName {
  font-size: 0.75rem;
  margin-top: layout.$spacing-04;
  color: $text-02;
}

.noteSkeletonContainer {
  height: layout.$spacing-13;
}

.editFields {
  display: flex;
  flex-direction: column;
  gap: layout.$spacing-03;
}

.editButtons {
  display: flex;
  gap: layout.$spacing-02;
  justify-content: flex-end;
}

.noteEditedBy {
  font-size: 0.75rem;
  margin-top: layout.$spacing-02;
  color: $text-02;
}

.menuItem {
.menuItem {
  max-width: none;
  max-inline-size: none;
}
}