// Put your custom SCSS code here
.docs-links {
  padding-left: 2rem;
  svg {
    height: 24px!important;
    width: 24px!important;
    margin-bottom: 0!important;
  }
  .with-icon {
    position: relative;

    svg {
      position: absolute;
      left: calc(-24px - .5rem);
    }
  }
}
.docs-sidebar {padding-left: 0}

.section-nav details details summary {
  font-weight: 500;
}

blockquote {
  position: relative; 
  padding: 1rem 1.2rem;
  width: 100%;  /* create space for the quotes */
  color: #484748;
  margin: 1rem auto 2rem;
  font-size: var(--bs-body-font-size);
  border: 1px solid var(--sl-color-purple);
  border-style: dashed;

  // background:
  //   linear-gradient(to right, var(--sl-color-purple) 4px, transparent 4px) 0 100%,
  //   linear-gradient(to left, var(--sl-color-purple) 4px, transparent 4px) 100% 0,
  //   linear-gradient(to bottom, var(--sl-color-purple) 4px, transparent 4px) 100% 0,
  //   linear-gradient(to top, var(--sl-color-purple) 4px, transparent 4px) 0 100%,
  //   linear-gradient(to right, var(--sl-color-purple) 4px, transparent 4px) 0% 0%,
  //   linear-gradient(to bottom, var(--sl-color-purple) 4px, transparent 4px) 0% 0%,
  //   linear-gradient(to left, var(--sl-color-purple) 4px, transparent 4px) 100% 100%,
  //   linear-gradient(to top, var(--sl-color-purple) 4px, transparent 4px) 100% 100%;
  // background-repeat: no-repeat;
  // background-size: 20px 20px;

  > *:last-child { margin-bottom: 0;}

  cite { text-align: right; display: block; font-weight: 500; }
}

.docs-content a { text-decoration: underline; }