stack/docs/fern/style.css

.indented {
  padding-left: 1.5rem;
  border-left: 1px solid var(--border);
}

.stack-white-image-showcase {
  display: flex;
  justify-content: center;
  background-color: white;
  border-radius: 12px;
  padding: 16px;
}

.grid:has(.prose .stack-aside-container) {
  grid-template-columns: minmax(0, 1fr) !important;
}

.stack-aside-container {
  display: grid;
  grid-template-columns: 55% 40%;
  justify-content: space-between;
}

.stack-aside-container > .stack-full-size {
  grid-column: 1 / 3;
}

.stack-aside-container > .stack-content {
  grid-column: 1;
}

.stack-aside-container > .stack-aside {
  grid-column: 2;
}

@media (max-width: 1200px) {
  .stack-aside-container {
    grid-template-columns: 100%;
  }
  .stack-aside-container > .stack-aside {
    grid-column: 1;
  }
  .stack-aside-container > .stack-content {
    grid-column: 1;
  }
  .stack-aside-container > .stack-full-size {
    grid-column: 1;
  }
}

.stack-aside-container > :not(.stack-aside):not(.stack-content):not(.stack-full-size) {
  background-color: red;
}
.stack-aside-container > :not(.stack-aside):not(.stack-content):not(.stack-full-size) {
 content: "All elements in a stack-aside-container must be wrapped in stack-aside, stack-content, or stack-full-size";
 font-size: 300%;
}

.stack-sticky {
  position: sticky;
  top: 64px;
}

.fern-accordion > * > button > .fern-accordion-trigger-title {
  font-weight: normal;
  vertical-align: top;
  transform: translateY(-2px);

}

.fern-accordion > [data-state="closed"] .fern-accordion-trigger-title > .accordion-show-properties::before {
  content: "Show properties";
}

.fern-accordion > [data-state="open"] .fern-accordion-trigger-title > .accordion-show-properties::before {
  content: "Hide properties";
}

.fern-accordion > [data-state="closed"] .fern-accordion-trigger-title > .accordion-show-possible-values::before {
  content: "Show possible values";
}

.fern-accordion > [data-state="open"] .fern-accordion-trigger-title > .accordion-show-possible-values::before {
  content: "Hide possible values";
}

.fern-api-property.border-b:first-of-type {
  padding-top: 0 !important;
}


.fern-api-property.border-b:last-of-type {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.small-codeblock-tabs .bg-tag-default-soft .fern-x-overflow {
  flex-wrap: wrap;
}

.small-codeblock-tabs .bg-tag-default-soft .fern-x-overflow .text-sm {
  font-size: 75%;
}

tr.stack-clickable-row {
  cursor: pointer;
  background-color: rgba(var(--accent), 0.12);
  user-select: none;
  -webkit-user-select: none;
}

tr.stack-clickable-row:hover {
  background-color: rgba(var(--accent), 0.17);
}

tr.stack-clickable-row:active {
  background-color: rgba(var(--accent), 0.25);
}

tr.stack-clickable-row-missing {
  background-color: red !important;
}

svg[icon*="square-t"] {
  color: #763fa6 !important;
}

svg[icon*="square-h"] {
  color: #3fa641 !important;
}

svg[icon*="square-code"] {
  color: #4448c2 !important;
}

svg[icon*="square-u"] {
  color: #eb7f38 !important;
}

.stack-dim-text {
  opacity: 0.5;
}

.fern-sidebar-link span + svg {
  display: none;
}

div.stack-50h > span > span > img {
  aspect-ratio: auto !important;
  height: unset !important;
  width: unset !important;
  height: 50px !important;
  object-fit: contain !important;
}

div.stack-100h > span > span > img {
  aspect-ratio: auto !important;
  height: unset !important;
  width: unset !important;
  height: 100px !important;
  object-fit: contain !important;
}

div.stack-150h > span > span > img {
  aspect-ratio: auto !important;
  height: unset !important;
  width: unset !important;
  height: 150px !important;
  object-fit: contain !important;
}

div.stack-200h > span > span > img {
  aspect-ratio: auto !important;
  height: unset !important;
  width: unset !important;
  height: 200px !important;
  object-fit: contain !important;
}

div.stack-250h > span > span > img {
  aspect-ratio: auto !important;
  height: unset !important;
  width: unset !important;
  height: 250px !important;
  object-fit: contain !important;
}

div.stack-300h > span > span > img {
  aspect-ratio: auto !important;
  height: unset !important;
  width: unset !important;
  height: 300px !important;
  object-fit: contain !important;
}

div.stack-350h > span > span > img {
  aspect-ratio: auto !important;
  height: unset !important;
  width: unset !important;
  height: 350px !important;
  object-fit: contain !important;
}