.changelog-content {
  word-wrap: break-word;
}
.changelogAddedIcon {
  color: var(--tako-color-G500);
}

.changelogRemovedIcon {
  color: var(--tako-color-R400);
}

.changelogChangedIcon {
  color: var(--tako-color-O400);
}

.changelogReleaseCard {
  height: auto;
  margin-top: 10px;
}

.changelogList {
  margin-top: 0;
}

.changelogListHeader {
  margin-top: 1rem;
}

.changelogListElement {
  list-style-type: none;

  & p {
    display: inline;
    padding-left: 5px;
  }

  & code {
    background-color: rgba(27, 31, 35, 0.05);
    border-radius: 6px;
    font-size: 85%;
    padding: 0.2em 0.4em;
  }

  & blockquote {
    margin: 0.5em 0 0.5em 1em;
    padding: 0.5em 1em;
    background-color: rgba(27, 31, 35, 0.05);
    border-radius: 6px;

    &::before {
      content: "\201C";
    }

    &::after {
      content: "\201D";
    }
  }
}

.changelogContainer {
  display: flex;
}

.changelogSidebar {
  padding-left: 25px;
}

.changelogSidebarList {
  padding-left: 0;
  margin-top: 5px;
  margin-bottom: 0;
}

.changelogSidebarList li {
  list-style-type: none;
  white-space: nowrap;
  font-size: 1.5rem;
}

.changelogListElementDescription {
  white-space: pre-wrap;
  word-break: break-word;
}

@media (width < 800px) {
  .changelogSidebar {
    display: none;
  }
}

/* Styling override */
.tako-card__content {
  padding-top: 0;
}

/* Prevent cards column from expanding based on content */
.changelogContainer > div:first-child {
  flex: 1;
  min-width: 0;
}

/* Accordion header layout */
.changelog__accordion-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.changelog__type-name {
  opacity: 0.75;
}

.changelog__field-name {
  font-weight: 600;
}

/* Change type badges */
.changelog__badge {
  font-size: 75%;
  font-weight: 600;
  padding: 0.2em 0.6em;
  border-radius: 6px;
  margin-left: auto;
  margin-right: 0.5rem;
}

.changelog__badge--added {
  background-color: #e6f4ea;
  color: var(--tako-color-G500);
}

.changelog__badge--removed,
.changelog__badge--deprecated {
  background-color: #fce8e6;
  color: var(--tako-color-R400);
}

.changelog__badge--modified {
  background-color: #fef7e0;
  color: var(--tako-color-O400);
}

/* Expanded detail content */
.changelog__accordion-body {
  overflow-wrap: break-word;
}

.changelog__accordion-body code {
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 6px;
  padding: 0.2em 0.4em;
}

.changelog__accordion-body blockquote {
  margin: 0.5em 0 0.5em 1em;
  padding: 0.5em 1em;
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 6px;
}

.changelog__accordion-body blockquote::before {
  content: "\201C";
}

.changelog__accordion-body blockquote::after {
  content: "\201D";
}