CSS selectors reference

1
.fern-background-image {
2
  background-attachment: fixed;
3
  background-size: cover;
4
  background-repeat: no-repeat;
5
  background-position-x: center;
6
  background-position-y: center;
7
}

1
.fern-page-heading {
2
  margin-top: 0;
3
  margin-bottom: 0;
4
  display: inline-block;
5
  leading-tight: 1.25;
6
  text-wrap: balance;
7
  word-wrap: break-word;
8
}

1
.fern-layout-page {
2
  max-width: var(--page-width-padded);
3
  padding-left: var(--page-padding);
4
  padding-right: var(--page-padding);
5
  margin-left: auto;
6
  margin-right: auto;
7
  min-width: 0;
8
  flex: 1 1 0%;
9
  min-height: calc(100vh - var(--header-height));
10
  display: flex;
11
  flex-direction: column;
12
}

1
.fern-layout-guide {
2
  padding-left: var(--page-padding);
3
  padding-right: var(--page-padding);
4
  margin-left: auto;
5
  margin-right: auto;
6
  margin-bottom: 3rem;
7
  min-width: 0;
8
  flex-shrink: 1;
9
  min-height: calc(100vh - var(--header-height));
10
  display: flex;
11
  flex-direction: column;
12
}

1
.fern-layout-reference {
2
  padding-left: var(--page-padding);
3
  margin-left: auto;
4
  margin-right: auto;
5
  min-width: 0;
6
  flex-shrink: 1;
7
  padding-right: calc(var(--page-padding) + var(--aside-offset));
8
  min-height: calc(100vh - var(--header-height));
9
  display: flex;
10
  flex-direction: column;
11
}
12
13
.fern-layout-reference-content {
14
  margin-top: 1.5rem;
15
  margin-bottom: 1.5rem;
16
}
17
18
@media (min-width: 768px) {
19
  .fern-layout-reference-content {
20
    display: grid;
21
    grid-template-columns: repeat(2, 1fr);
22
    gap: 2rem;
23
  }
24
}
25
26
@media (min-width: 1024px) {
27
  .fern-layout-reference-content {
28
    gap: 3rem;
29
  }
30
}

1
.fern-layout-overview {
2
  padding-left: var(--page-padding);
3
  padding-right: var(--page-padding);
4
  margin-left: auto;
5
  margin-right: auto;
6
  margin-bottom: 3rem;
7
  min-width: 0;
8
  flex-shrink: 1;
9
  min-height: calc(100vh - var(--header-height));
10
  display: flex;
11
  flex-direction: column;
12
}

1
.fern-layout-changelog[data-aside-state="hidden"] {
2
  max-width: var(--page-width-padded);
3
  padding-left: var(--page-padding);
4
  padding-right: var(--page-padding);
5
  margin-left: auto;
6
  margin-right: auto;
7
  min-width: 0;
8
}
9
10
.fern-layout-changelog[data-aside-state="visible"] {
11
  padding-left: var(--page-padding);
12
  padding-right: var(--page-padding);
13
  margin-left: auto;
14
  margin-right: auto;
15
  margin-bottom: 3rem;
16
  min-width: 0;
17
  flex-shrink: 1;
18
}

1
.fern-header {
2
  backdrop-filter: blur(0.5rem);
3
  background-color: transparent;
4
}

1
.fern-header-tabs {
2
  backdrop-filter: blur(0.5rem);
3
  background-color: transparent;
4
  display: none;
5
  max-width: 100%;
6
  user-select: none;
7
}
8
9
@media (min-width: 1024px) {
10
  .fern-header-tabs {
11
    display: flex;
12
    align-items: center;
13
    justify-content: space-between;
14
  }
15
}

1
.fern-header-logo-container {
2
  position: relative;
3
  display: flex;
4
  height: 100%;
5
  min-width: fit-content;
6
  flex: 1 1 0%;
7
  flex-shrink: 0;
8
  gap: 0.5rem;
9
  padding-top: 0.25rem;
10
  padding-bottom: 0.25rem;
11
}

1
.fern-header-search-bar {
2
  display: none;
3
  width: 100%;
4
  min-width: 0;
5
  flex-shrink: 1;
6
}
7
8
@media (min-width: 1024px) {
9
  .fern-header-search-bar {
10
    display: inline-flex;
11
  }
12
}

1
.fern-header-navbar-links {
2
  display: none;
3
  flex: 1 1 0%;
4
}
5
6
@media (min-width: 1024px) {
7
  .fern-header-navbar-links {
8
    display: flex;
9
    align-items: center;
10
    justify-content: flex-end;
11
  }
12
}

1
.fern-header-mobile-menu-button {
2
  display: flex;
3
  flex: 1 1 0%;
4
  align-items: center;
5
  justify-content: flex-end;
6
}

1
.fern-sidebar-header {
2
  height: var(--header-height);
3
  margin-left: 0.75rem;
4
  margin-right: 0.75rem;
5
  display: none;
6
  border-bottom: 1px solid transparent;
7
}
8
9
@media (min-width: 1024px) {
10
  .fern-sidebar-header {
11
    display: flex;
12
    align-items: center;
13
    justify-content: space-between;
14
  }
15
}

1
.fern-sidebar-heading {
2
  margin-bottom: 0.25rem;
3
  display: flex;
4
  min-height: 32px;
5
  align-items: center;
6
  padding-left: 1rem;
7
  padding-right: 1rem;
8
}
9
10
@media (min-width: 1024px) {
11
  .fern-sidebar-heading {
12
    min-height: 36px;
13
    padding-left: 0.5rem;
14
    padding-right: 0.5rem;
15
  }
16
}

1
.fern-sidebar-heading-content {
2
  margin: 0;
3
  font-size: 1rem;
4
  font-weight: 600;
5
  line-height: 1.5rem;
6
}
7
8
@media (min-width: 1024px) {
9
  .fern-sidebar-heading-content {
10
    font-size: 0.875rem;
11
    line-height: 1.25rem;
12
  }
13
}

1
.fern-sidebar-link {
2
  color: var(--grayscale-a11);
3
  display: flex;
4
  width: 100%;
5
  align-items: center;
6
  gap: 0.75rem;
7
  padding: 0.5rem 1rem;
8
  text-align: left;
9
  font-size: 1rem;
10
  line-height: 1.25;
11
  transition-property: color, background-color;
12
}
13
14
@media (min-width: 1024px) {
15
  .fern-sidebar-link {
16
    border-radius: var(--radius-2);
17
    padding: 0.5rem;
18
    font-size: 0.875rem;
19
  }
20
}
21
22
.fern-sidebar-link:hover {
23
  color: var(--grayscale-a12);
24
  background-color: var(--grayscale-a3);
25
  transition: none;
26
}
27
28
.fern-sidebar-link[data-state="active"] {
29
  color: var(--accent-a11);
30
  background-color: var(--accent-a3);
31
  font-weight: 500;
32
}

1
.fern-sidebar-link-title {
2
  overflow: hidden;
3
  text-overflow: ellipsis;
4
  white-space: nowrap;
5
  min-width: 0;
6
}
7
8
.fern-sidebar-link-title.marquee-active {
9
  text-overflow: clip;
10
}
11
12
.fern-sidebar-link-title.wrap-mode {
13
  white-space: normal;
14
  overflow-wrap: anywhere;
15
  text-overflow: clip;
16
}

1
.fern-sidebar-link-title-inner {
2
  display: inline;
3
  will-change: transform;
4
  transform: translateX(0);
5
}
6
7
.fern-sidebar-link-title-inner.is-marquee {
8
  display: inline-block;
9
  animation: fern-sidebar-marquee var(--marquee-duration, 4s) linear forwards;
10
}
11
12
@keyframes fern-sidebar-marquee {
13
  to {
14
    transform: translateX(var(--marquee-translate, 0));
15
  }
16
}

1
.fern-sidebar-group {
2
  list-style: none;
3
  margin-left: -1rem;
4
  margin-right: -1rem;
5
}
6
7
@media (min-width: 1024px) {
8
  .fern-sidebar-group {
9
    margin-left: 0;
10
    margin-right: 0;
11
  }
12
}
13
14
.fern-sidebar-group .fern-sidebar-group {
15
  margin-left: 0;
16
  margin-right: 0;
17
}

1
.fern-sidebar-tabs {
2
  margin-top: 1.25rem;
3
  margin-bottom: 1.5rem;
4
  display: flex;
5
  flex-direction: column;
6
  list-style: none;
7
}

1
.fern-breadcrumb {
2
  display: inline-flex;
3
  height: fit-content;
4
  max-width: 100%;
5
  flex-wrap: wrap;
6
  align-items: baseline;
7
  font-weight: 500;
8
}

1
.fern-breadcrumb-item {
2
  color: var(--accent-a11);
3
  min-width: 0;
4
  flex-shrink: 1;
5
  font-size: 0.875rem;
6
}

1
.fern-breadcrumb-arrow {
2
  color: var(--grayscale-a9);
3
  margin-left: 0.125rem;
4
  margin-right: 0.125rem;
5
  width: 1rem;
6
  height: 1rem;
7
  align-self: center;
8
}

1
.fern-button {
2
  transition-property: color, background-color;
3
  display: inline-flex;
4
  align-items: center;
5
  justify-content: center;
6
  border-radius: var(--radius-2);
7
  height: 2.5rem;
8
  padding: 0.25rem 0.75rem;
9
  font-size: 0.875rem;
10
  cursor: pointer;
11
}
12
13
@media (min-width: 640px) {
14
  .fern-button {
15
    height: 2rem;
16
  }
17
}
18
19
.fern-button:hover {
20
  transition: none;
21
}

1
.fern-button-content {
2
  display: inline-flex;
3
  min-width: 0;
4
  flex-shrink: 1;
5
  align-items: center;
6
  height: 1.5rem;
7
  gap: 0.375rem;
8
}

1
.fern-button-text {
2
  min-width: 0;
3
  flex-shrink: 1;
4
  font-weight: 500;
5
}
6
7
.fern-button:not(.multiline) .fern-button-text {
8
  overflow: hidden;
9
  text-overflow: ellipsis;
10
  white-space: nowrap;
11
}

1
.fern-button-group {
2
  display: inline-flex;
3
  align-items: center;
4
}
5
6
.fern-button-group > .fern-button:has(+ .fern-button.outlined, + .fern-button.filled),
7
.fern-button-group > .fern-button.outlined:has(+ .fern-button.minimal),
8
.fern-button-group > .fern-button.filled:has(+ .fern-button.minimal) {
9
  margin-right: 0.5rem;
10
}

1
.fern-copy-button {
2
  width: fit-content;
3
  height: fit-content;
4
  backdrop-filter: blur(8px);
5
}

1
.fern-expand-button {
2
  width: fit-content;
3
  height: fit-content;
4
  backdrop-filter: blur(8px);
5
}

1
.fern-page-actions {
2
  display: flex;
3
  border-radius: var(--radius-2);
4
  border: 1px solid var(--border-default);
5
}
6
7
.fern-page-actions > *:not(:last-child) {
8
  border-right: 1px solid var(--border-default);
9
  margin-right: -1px;
10
}

1
.fern-card {
2
  color: var(--text-body);
3
  background-color: var(--card-background);
4
  border: 1px solid var(--border-default);
5
  box-shadow: 0 2px 4px var(--grayscale-a3);
6
  transition-property: all;
7
}
8
9
.fern-card:hover {
10
  color: var(--text-body);
11
  transition: none;
12
}
13
14
.fern-card.interactive:hover {
15
  box-shadow: 0 4px 8px var(--grayscale-a4);
16
  border-color: var(--accent-a9);
17
}
18
19
.fern-card.elevated {
20
  border-color: var(--accent-a9);
21
  box-shadow: 0 4px 12px var(--accent-a4);
22
}

1
.fern-input {
2
  width: 100%;
3
  border: none;
4
  background-color: transparent;
5
  outline: none;
6
  caret-color: var(--accent);
7
  padding: 0.5rem 0.625rem;
8
  font-size: 0.875rem;
9
}
10
11
@media (max-width: 640px) {
12
  .fern-input {
13
    font-size: 1rem;
14
  }
15
}
16
17
input.fern-input::-webkit-outer-spin-button,
18
input.fern-input::-webkit-inner-spin-button {
19
  appearance: none;
20
  margin: 0;
21
}
22
23
input.fern-input[type="number"] {
24
  appearance: textfield;
25
}

1
.fern-input-group {
2
  display: flex;
3
  align-items: center;
4
  overflow: hidden;
5
  border-radius: var(--radius-2);
6
  background-color: white;
7
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
8
  border: 1px solid var(--border-default);
9
  height: 2.5rem;
10
}
11
12
@media (prefers-color-scheme: dark) {
13
  .fern-input-group {
14
    background-color: var(--grayscale-a2);
15
  }
16
}
17
18
@media (min-width: 640px) {
19
  .fern-input-group {
20
    height: 2rem;
21
  }
22
}
23
24
.fern-input-group:focus-within {
25
  outline: none;
26
  border-color: var(--accent-a5);
27
  box-shadow: 0 0 0 2px var(--accent-a5);
28
}
29
30
.fern-input-group.error {
31
  background: rgba(252, 100, 100, 0.63);
32
}

1
.fern-input-icon {
2
  display: flex;
3
  align-items: center;
4
  justify-content: center;
5
  height: 100%;
6
  width: 2rem;
7
  flex-shrink: 0;
8
}
9
10
.fern-input-icon + .fern-input {
11
  margin-left: -2rem;
12
  padding-left: 2rem;
13
}

1
.fern-input-right-element {
2
  display: flex;
3
  align-items: center;
4
  justify-content: center;
5
  margin-left: -0.5rem;
6
  height: 100%;
7
  min-width: 2rem;
8
  flex-shrink: 0;
9
  padding-left: 0;
10
  padding-right: 0;
11
}

1
.fern-input-clear-button {
2
  display: flex;
3
  align-items: center;
4
  justify-content: center;
5
  color: var(--grayscale-a9);
6
  width: 1.5rem;
7
  height: 1.5rem;
8
  flex-shrink: 0;
9
  margin-right: 0.25rem;
10
  cursor: pointer;
11
  border: none;
12
  background-color: transparent;
13
  transition: color 0.15s;
14
}
15
16
.fern-input-clear-button:hover {
17
  color: var(--grayscale-a11);
18
}

1
.fern-textarea {
2
  width: 100%;
3
  resize: none;
4
  border: none;
5
  background-color: transparent;
6
  outline: none;
7
  caret-color: var(--accent);
8
  padding: 0.5rem 0.625rem;
9
  font-size: 0.875rem;
10
}
11
12
@media (max-width: 640px) {
13
  .fern-textarea {
14
    font-size: 1rem;
15
  }
16
}

1
.fern-textarea-group {
2
  display: flex;
3
  align-items: center;
4
  overflow: hidden;
5
  border-radius: var(--radius-2);
6
  background-color: white;
7
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
8
  border: 1px solid var(--border-default);
9
}
10
11
@media (prefers-color-scheme: dark) {
12
  .fern-textarea-group {
13
    background-color: var(--grayscale-a2);
14
  }
15
}
16
17
.fern-textarea-group:focus-within {
18
  outline: none;
19
  border-color: var(--accent-a5);
20
  box-shadow: 0 0 0 2px var(--accent-a5);
21
}

1
.fern-checkbox-label {
2
  display: flex;
3
  cursor: pointer;
4
}

1
.fern-checkbox-item {
2
  border-radius: var(--radius-1);
3
  position: relative;
4
  margin-top: 0.125rem;
5
  display: inline-block;
6
  width: 1rem;
7
  height: 1rem;
8
  border: 1px solid var(--border-default);
9
}
10
11
.fern-checkbox-item:hover {
12
  background-color: var(--accent-a3);
13
}
14
15
.fern-checkbox-item:focus {
16
  outline: 4px solid var(--accent-a3);
17
  outline-offset: 0;
18
}

1
.fern-checkbox-indicator {
2
  background-color: var(--accent);
3
  color: var(--accent-contrast);
4
  border-radius: var(--radius-1);
5
  display: flex;
6
  width: 1rem;
7
  height: 1rem;
8
  align-items: center;
9
  justify-content: center;
10
}

1
.fern-radio-group {
2
  display: flex;
3
  flex-direction: column;
4
  gap: 1rem;
5
}
6
7
.fern-radio-group.compact {
8
  gap: 0.5rem;
9
  font-size: 0.875rem;
10
}

1
.fern-radio-label {
2
  display: flex;
3
  cursor: pointer;
4
}

1
.fern-radio-item {
2
  border: 1px solid var(--border-default);
3
  position: relative;
4
  margin-top: 0.125rem;
5
  display: inline-block;
6
  width: 1rem;
7
  height: 1rem;
8
  border-radius: 9999px;
9
}
10
11
.fern-radio-item:hover {
12
  background-color: var(--accent-a3);
13
}
14
15
.fern-radio-item:focus {
16
  outline: 4px solid var(--accent-a3);
17
  outline-offset: 0;
18
}

1
.fern-radio-indicator {
2
  background-color: var(--accent);
3
  display: flex;
4
  width: 1rem;
5
  height: 1rem;
6
  align-items: center;
7
  justify-content: center;
8
  border-radius: 9999px;
9
}
10
11
.fern-radio-indicator::after {
12
  background-color: var(--background);
13
  position: absolute;
14
  width: 0.5rem;
15
  height: 0.5rem;
16
  border-radius: 9999px;
17
  content: "";
18
}

1
.fern-segmented-control {
2
  border-radius: var(--radius-3/2);
3
  height: 2.25rem;
4
  background-color: white;
5
  display: flex;
6
  align-items: center;
7
  gap: 1px;
8
  padding: 0.125rem;
9
  border: 1px solid var(--border-default);
10
}
11
12
@media (prefers-color-scheme: dark) {
13
  .fern-segmented-control {
14
    background-color: rgba(255, 255, 255, 0.05);
15
  }
16
}
17
18
.fern-segmented-control .fern-button {
19
  border-radius: var(--radius-1);
20
  min-width: 0;
21
  flex-shrink: 1;
22
}

1
.fern-numeric-input-group {
2
  display: flex;
3
  align-items: center;
4
  overflow: hidden;
5
  border-radius: var(--radius-2);
6
  background-color: white;
7
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
8
  border: 1px solid var(--border-default);
9
  height: 2.5rem;
10
}
11
12
@media (min-width: 640px) {
13
  .fern-numeric-input-group {
14
    height: 2rem;
15
  }
16
}
17
18
.fern-numeric-input-group:focus-within {
19
  outline: none;
20
  border-color: var(--accent-a5);
21
  box-shadow: 0 0 0 2px var(--accent-a5);
22
}

1
.fern-numeric-input-group .fern-numeric-input-step {
2
  border-color: var(--border-default);
3
  height: 100%;
4
  border-radius: 0;
5
}
6
7
.fern-numeric-input-group .fern-numeric-input-step:first-child {
8
  border-top-left-radius: var(--radius-3/2);
9
  border-bottom-left-radius: var(--radius-3/2);
10
  border-right: 1px solid;
11
}
12
13
.fern-numeric-input-group .fern-numeric-input-step:last-child {
14
  border-top-right-radius: var(--radius-3/2);
15
  border-bottom-right-radius: var(--radius-3/2);
16
  border-left: 1px solid;
17
}
18
19
.fern-numeric-input-group:focus-within .fern-numeric-input-step:not(:disabled) {
20
  color: var(--accent-a11);
21
  border-color: var(--accent-a5);
22
}
23
24
.fern-numeric-input-group:focus-within .fern-numeric-input-step:not(:disabled):hover {
25
  color: var(--accent-a11);
26
  background-color: var(--accent-a3);
27
}

1
.fern-dropdown {
2
  position: relative;
3
  z-index: 50;
4
  animation: popover-in 150ms ease-out;
5
  min-width: var(--radix-dropdown-menu-trigger-width);
6
  background-color: var(--background);
7
  border: 1px solid var(--border-default);
8
  border-radius: var(--radius-2);
9
  display: flex;
10
  max-height: 300px;
11
  flex-direction: column;
12
  backdrop-filter: blur(8px);
13
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
14
}

1
.fern-dropdown-item {
2
  border-radius: var(--radius-1);
3
  display: flex;
4
  width: 100%;
5
  cursor: default;
6
  align-items: center;
7
  justify-content: flex-start;
8
  padding: 0.25rem 0.5rem;
9
  text-align: left;
10
  font-size: 0.875rem;
11
}
12
13
.fern-dropdown-item[data-highlighted] {
14
  color: var(--accent-contrast);
15
  background-color: var(--accent);
16
}

1
.fern-dropdown-item-indicator {
2
  margin-right: 0.25rem;
3
  display: flex;
4
  height: 100%;
5
  width: 1rem;
6
  flex: none;
7
  align-items: center;
8
  justify-content: center;
9
}

1
.fern-selection-item {
2
  border-radius: var(--radius-3/2);
3
  display: flex;
4
  flex: 1 1 0%;
5
  cursor: pointer;
6
  align-items: center;
7
  justify-content: space-between;
8
  gap: 0.5rem;
9
  border: 1px solid transparent;
10
  padding: 0.25rem 0.625rem 0.25rem 0.25rem;
11
  width: 100%;
12
  text-align: left;
13
  transition: all 200ms ease-in-out;
14
}
15
16
.fern-selection-item:hover {
17
  color: var(--accent);
18
  background-color: var(--grayscale-a3);
19
}

1
.fern-selection-item-icon {
2
  border-radius: var(--radius-2);
3
  color: var(--grayscale-a11);
4
  margin: 0.25rem;
5
  display: flex;
6
  height: 56px;
7
  width: 56px;
8
  flex-shrink: 0;
9
  align-items: center;
10
  justify-content: center;
11
  overflow: hidden;
12
}
13
14
.fern-selection-item-icon.use-icon {
15
  border: 1px solid var(--grayscale-a5);
16
  padding: 0.25rem;
17
}
18
19
.fern-selection-item-icon svg,
20
.fern-selection-item-icon .fern-file-icon {
21
  display: block;
22
  height: 50%;
23
  width: 50%;
24
  transition: all 300ms ease-in-out;
25
}
26
27
.fern-selection-item:hover .fern-selection-item-icon svg,
28
.fern-selection-item:hover .fern-selection-item-icon .fern-file-icon {
29
  transform: scale(1.2);
30
}
31
32
.fern-selection-item.dense .fern-selection-item-icon {
33
  margin: 0.125rem;
34
  height: 36px;
35
  width: 36px;
36
  padding: 0.125rem;
37
}

1
.fern-selection-item-title {
2
  color: var(--grayscale-a12);
3
  font-weight: 700;
4
  line-height: 1.25;
5
}
6
7
@media (min-width: 1024px) {
8
  .fern-selection-item-title {
9
    font-size: 0.875rem;
10
  }
11
}

1
.fern-selection-item-end-icon {
2
  color: var(--grayscale-a11);
3
}

1
.fern-product-selector {
2
  width: 100%;
3
}
4
5
@media (min-width: 1024px) {
6
  .fern-product-selector {
7
    width: auto;
8
  }
9
}

1
.fern-accordion {
2
  border-radius: var(--radius-3);
3
  border-top: 1px solid var(--border-default);
4
}
5
6
.fern-accordion li {
7
  list-style-position: outside;
8
}

1
.fern-accordion-item {
2
  overflow: hidden;
3
}
4
5
.fern-accordion-item:first-child {
6
  border-top-left-radius: inherit;
7
  border-top-right-radius: inherit;
8
}
9
10
.fern-accordion-item:last-child {
11
  border-bottom-left-radius: inherit;
12
  border-bottom-right-radius: inherit;
13
}

1
.fern-accordion-trigger {
2
  display: flex;
3
  cursor: pointer;
4
  align-items: center;
5
  gap: 0.75rem;
6
  border-radius: inherit;
7
  padding: 1rem;
8
  transition-property: background-color;
9
  list-style: none;
10
  overflow: auto;
11
}
12
13
.fern-accordion-trigger:hover {
14
  background-color: var(--grayscale-a2);
15
  transition: none;
16
}
17
18
.fern-accordion-trigger[data-state="open"] {
19
  border-bottom-left-radius: 0;
20
  border-bottom-right-radius: 0;
21
}
22
23
.fern-accordion-trigger::-webkit-details-marker {
24
  display: none;
25
}

1
.fern-accordion-trigger-arrow {
2
  color: var(--grayscale-a11);
3
  width: 1rem;
4
  height: 1rem;
5
  flex-shrink: 0;
6
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
7
}
8
9
.fern-accordion-trigger[data-state="open"] .fern-accordion-trigger-arrow {
10
  transform: rotate(90deg);
11
}

1
.fern-accordion-trigger-title {
2
  color: var(--text-body);
3
  margin: 0;
4
  margin-bottom: -1px;
5
  display: flex;
6
  max-width: max-content;
7
  text-align: left;
8
  font-size: 1rem;
9
  line-height: 1.5rem;
10
}
11
12
.fern-accordion-trigger-title p {
13
  margin: 0 !important;
14
  padding: 0 !important;
15
  line-height: inherit !important;
16
}

1
.fern-scroll-area {
2
  z-index: 0;
3
  display: flex;
4
  height: 100%;
5
  width: 100%;
6
  flex-direction: column;
7
  overflow: hidden;
8
}

1
.fern-scroll-area-viewport {
2
  display: flex;
3
  height: 100%;
4
  min-height: 0;
5
  width: 100%;
6
  flex-shrink: 1;
7
  flex-direction: column;
8
  border-radius: inherit;
9
}
10
11
.fern-scroll-area-viewport:has(.fern-scroll-area-scrollbar[data-orientation="horizontal"]) {
12
  overscroll-behavior-x: contain;
13
}
14
15
.fern-scroll-area-viewport > div {
16
  display: block !important;
17
  flex-grow: 1;
18
}
19
20
.fern-scroll-area-viewport[data-scrollbars="vertical"] > div {
21
  max-width: 100%;
22
}

1
.fern-scroll-area-scrollbar {
2
  z-index: 10;
3
  margin: 0.25rem;
4
  display: flex;
5
  touch-action: none;
6
  user-select: none;
7
  border-radius: 9999px;
8
  transition: all 150ms ease-out;
9
  background-color: var(--grayscale-a3);
10
}
11
12
.fern-scroll-area-scrollbar[data-state="hidden"] {
13
  opacity: 0;
14
}
15
16
.fern-scroll-area-scrollbar[data-orientation="vertical"] {
17
  margin-top: 5px;
18
  margin-bottom: 5px;
19
  width: 4px;
20
}
21
22
.fern-scroll-area-scrollbar[data-orientation="vertical"]:hover {
23
  width: 6px;
24
}
25
26
.fern-scroll-area-scrollbar[data-orientation="horizontal"] {
27
  margin-left: 5px;
28
  margin-right: 5px;
29
  height: 4px;
30
  flex-direction: column;
31
}
32
33
.fern-scroll-area-scrollbar[data-orientation="horizontal"]:hover {
34
  height: 6px;
35
}

1
.fern-scroll-area-thumb {
2
  position: relative;
3
  z-index: auto;
4
  display: flex;
5
  background-color: var(--accent-track);
6
  flex: 1 1 0%;
7
  border-radius: 9999px;
8
}
9
10
.fern-scroll-area-thumb::before {
11
  content: "";
12
  position: absolute;
13
  top: 50%;
14
  left: 50%;
15
  transform: translate(-50%, -50%);
16
  width: 100%;
17
  height: 100%;
18
  min-width: 28px;
19
  min-height: 28px;
20
}

1
.fern-scroll-area-corner {
2
  background-color: transparent;
3
}

1
.fern-docs-badge {
2
  align-items: center;
3
  display: inline-flex;
4
  gap: 0.25rem;
5
  justify-content: center;
6
  line-height: 1rem;
7
  box-sizing: border-box;
8
  font-weight: 600;
9
  white-space: nowrap;
10
}
11
12
.fern-docs-badge.small {
13
  border-radius: var(--radius-1);
14
  font-size: 0.75rem;
15
  height: 1.25rem;
16
  padding: 0 0.375rem;
17
}
18
19
.fern-docs-badge.large {
20
  border-radius: var(--radius-3/2);
21
  font-size: 0.875rem;
22
  height: 1.5rem;
23
  padding: 0.25rem 0.5rem;
24
}
25
26
.fern-docs-badge.rounded {
27
  border-radius: 9999px !important;
28
}
29
30
.fern-docs-badge:disabled {
31
  opacity: 0.5;
32
  cursor: not-allowed;
33
}
34
35
.fern-docs-badge[data-badge-type="http-method"],
36
.fern-docs-badge[data-badge-type="status-code"] {
37
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
38
  font-variant-numeric: slashed-zero;
39
  text-transform: uppercase;
40
}

1
.fern-mdx-link {
2
  color: var(--accent-a11);
3
  font-weight: 600;
4
  text-decoration-line: underline;
5
  text-decoration-color: currentcolor;
6
  text-decoration-thickness: 1px !important;
7
  text-underline-offset: 0.25rem;
8
}
9
10
.fern-mdx-link:hover {
11
  text-decoration-thickness: 2px !important;
12
}
13
14
.fern-mdx-link svg.external-link-icon {
15
  margin-left: 0.125rem;
16
  display: inline-block;
17
  width: 0.875rem;
18
  height: 0.875rem;
19
  color: currentColor;
20
  opacity: 0.7;
21
  overflow: visible;
22
}
23
24
.fern-mdx-link:hover svg.external-link-icon path:nth-child(1),
25
.fern-mdx-link:hover svg.external-link-icon path:nth-child(2) {
26
  transform: translate(2px, -2px);
27
  transition: transform 0.2s ease;
28
}

1
.fern-callout {
2
  border-radius: var(--radius-3);
3
  margin-bottom: 1.5rem;
4
  margin-top: 1rem;
5
  border: 1px solid;
6
  padding: 1rem;
7
}
8
9
.fern-callout:first-child {
10
  margin-top: 0;
11
}