.schema {
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);

  &:last-child {
    border-bottom: 0;
  }
}

.properties {
  margin-top: 20px;
  padding: 10px 20px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

.prefix {
  font-family: var(--font-mono);
  color: #555;
  font-size: 0.95em;
}

.name {
  font-family: var(--font-mono);
  font-weight: bold;
  color: #555;
  font-size: 0.95em;
}

.description,
.deprecatedDescription {
  p:last-child {
    margin-bottom: 0;
  }
}

.deprecatedBlock {
  margin-top: 30px;
}

.deprecatedBlockInner {
  margin-top: 20px;
}

.deprecatedDescription {
  color: var(--light-body-color);
}

.required {
  color: var(--accent-color);
  text-tranform: uppercase;
  font-size: 0.95em;
}

.optional {
  color: var(--light-body-color);
  font-size: 0.95em;
}

.type {
  background: var(--light-bg-color);
  padding: 0.05em 0.3em;
  font-size: 0.95em;
  color: #555;
}

.button {
  background: white;
  color: var(--light-body-color);
  border: 1px solid var(--border-color);
  margin-top: 10px;
  padding: 5px 13px;
  font-family: var(--font-sans);
  border-radius: 3px;
  font-size: inherit;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  font-size: 0.95em;

  svg {
    margin-right: 5px;
    fill: var(--extra-light-body-color);
  }

  &:hover {
    color: var(--base-body-color);
  }
}

.optionalSchema {
  font-family: var(--font-sans);
  font-size: 15px;
  background: #f4f5ff;
  padding: 10px 15px;
  border-radius: 10px;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  line-height: 1;

  svg {
    fill: #1e64f0;
    margin-right: 8px;
  }
}
