.Note {
  list-style: none;
  padding: 0;
  max-inline-size: none;
}

.Note-link,
.Note-meta {
  display: block;
  font-weight: 600;
  color: var(--text-color);
}
.Note-meta {
  font-variant-caps: all-small-caps;
  font-size: var(--font-size-small);
}
.Note-link {
  line-height: 1.25;
  max-inline-size: none;
}

.Note-title {
  font-size: var(--font-size-large);
  font-weight: 800;
  text-wrap: balance;
  display: block;
}

.Note-link:visited {
  color: var(--visited);
}

.Note-item {
  background-color: var(--background-color);
  background: var(--background-gradient);
  border: 1px solid var(--border-color);
  padding: var(--size-default) var(--size-xsmall);
  width: 100%;
  position: relative;
  display: flex;
  max-inline-size: none;
}

.Note-item > * {
  max-inline-size: var(--measure);
}

.Note .Note-content {
  background: transparent;
  font-weight: 400;
  color: var(--text-color);
  max-inline-size: none;
  width: 100%;
}

.Note-content > pre {
  margin: 0 calc(var(--size-default) * -1);
}

.NoteTag {
  font-size: var(--font-size-small);
  max-inline-size: none;
}
.NoteTag-link {
  padding: var(--size-xxsmall);
  text-decoration: none;
  border-radius: 0.25rem;
  font-family: var(--mono-font-family), monospace;
  font-feature-settings: var(--mono-font-feature-settings);
  font-variation-settings:
    "wght" var(--font-weight, 400),
    "wdth" var(--font-width, 100),
    "slnt" var(--font-slant, 0);
  font-size: var(--font-size-small);
  font-size-adjust: ex-height 0.45;
  --button-bg-gradient: var(--orange-light-gradient-small);
  --button-color: var(--orange-text);
  background-color: var(--button-bg);
  background: var(--button-bg-gradient);
}

.NoteTags {
  text-align: right;
  max-inline-size: none;
  display: flex;
  gap: var(--size-default);
  justify-content: end;
}