.version-banner {
  padding: 0.5rem 1.5rem;
  z-index: 1;
  background: var(--color-tint);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: var(--size-step--1);

  &.published {
    --background: #ebf9eb;
    --color: #4dd45c;
    --border: #4dd45c;
  }

  &.draft {
    --background: #fefaf3;
    --color: #ffa800;
    --border: #ffa800;
  }

  .version-banner--content {
    min-height: 2rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }

  .version-banner--text {
    flex: 1;
  }

  .version-banner--text--caption {
    font-weight: bold;
    font-size: larger;
  }

  .version-banner--text--nav-links {
    & > * {
      margin-left: 1rem;
    }
  }

  .version-banner--actions {
    display: flex;
    align-items: baseline;

    & > * + * {
      margin-left: 0.25rem;
    }
  }
}