/* over-ride styles here */


/* styles for <code-explorer /> */

/* NOTE currently this one isn't being applied?? */
div.code-explorer {
  display: grid;
  grid-template-columns: minmax(auto, 3fr) 2fr;
  grid-gap: 1rem;
}

.code-explorer > .hidden-slot {
  display: none;
}

.code-explorer > .code {
  background-color: #f8f8f8;
  padding: 1.4rem 0
}
.code-explorer > .code > .line {
  margin: 0 0 2px 0;

  display: grid;
  grid-template-columns: auto 1fr;
  border-right: 2px solid rgba(0,0,0,0);
}
.code-explorer > .code > .line.comments {
  border-right: 2px solid #42b983;
}
.code-explorer > .code > .line:hover {
  background-color: rgba(255, 0, 255, 0.1);
  cursor: pointer;
}
.code-explorer > .code > .line.active {
  background-color: rgb(206, 251, 230);
}
.code-explorer > .code > .line > pre {
  overflow-x: hidden;
  background-color: transparent;
  padding: 0 1.4rem;
  margin: 0;
}
.code-explorer > .code > .line > pre > code {
  background-color: transparent;
  padding: 0;
  margin: 0;
}

.code-explorer > .code >.line > pre > code > span.token.function.require {
  color: hotpink;
}

.code-explorer > .description {
  align-self: start;
  font-family: Roboto, sans-serif;
  padding: 10px;

  color: #555;
  border: 5px solid rgba(255, 0, 255, 0);
  border-radius: 1rem;
}
.code-explorer > .description.active {
  border-color: rgb(206, 251, 230);
}
.code-explorer > .description p {
  margin: 0 0 1.2rem 0;
}