src/styles/main.scss
@use "@/styles/mixins/layout";
@use "@/styles/partials/_theme";
@use "@/styles/partials/_vars";
@use "@/styles/utils/expressive-code";

//////////////////////////////////////////////////////////////////////////////////////////
// LAYOUT
:root {
  --ec-brdRad: var(--sp) !important;

  // Metrics for Arcjet's base layout.
  // -------------------------------------------------------------------------------------
  @include layout.content-default-1552;
  @include layout.content-max-1552;

  --sl-heading: "Jost Variable", "SF Pro";
  --sl-font: "Figtree Variable", "SF Pro";
  --sl-font-mono: "IBM Plex Mono", "mono";

  --Sidebar-width: 300px;
  --PageSidebar-width: 300px;
}

@media (min-width: 72rem) {
  :root {
    --sl-content-pad-x: calc(var(--sp) * 6);
  }
}

@media (max-width: 72rem) {
  :root {
    --sl-content-pad-x: calc(var(--sp) * 4);
  }
}

@media (max-width: 480px) {
  :root {
    --sl-content-pad-x: calc(var(--sp) * 3);
  }
}

@media (max-width: 320px) {
  :root {
    --sl-content-pad-x: calc(var(--sp) * 2);
  }
}

@media (max-width: 50rem) {
  :root {
    --Header-height: calc(var(--sp) * 7);
  }
}

[data-theme="dark"]:root {
  body {
    background: var(--colorBg);
    background-color: var(--colorBg);
  }
}

[data-theme="light"]:root {
  body {
    background: var(--colorBg);
    background-color: var(--colorBg);
  }
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  color: var(--aj-palette-txt-secondary);
  background: var(--sl-color-bg);
}

/* -------------------------------------------------------
.page */
.page {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

/* -------------------------------------------------------
.main-frame */
.main-frame {
  padding-top: calc(var(--Header-height) + var(--sp) * 3);
}

/* -------------------------------------------------------
.main-pane */
// 72rem
@media (min-width: 1152px) {
  [data-has-sidebar][data-has-toc] .main-pane {
    width: min(
      calc(100vw - var(--Sidebar-width) - var(--PageSidebar-width)),
      calc(
        var(--content-max-width) - var(--Sidebar-width) - var(
            --PageSidebar-width
          )
      )
    );
  }
}

@media (max-width: 1151px) {
  [data-has-sidebar][data-has-toc] .main-pane {
    width: calc(100vw - var(--Sidebar-width));
  }
}

@media (max-width: 800px) {
  [data-has-sidebar][data-has-toc] .main-pane {
    width: 100vw;
  }
}

/* -------------------------------------------------------
.content-panel */
.content-panel {
  border-bottom-width: 0px !important;
  border-top-width: 0px !important;
}

@media (max-width: 1151px) {
  .main-pane:has(+ .main-pane + .right-sidebar-container),
  .right-sidebar-container + .main-pane {
    .content-panel:first-child {
      padding-top: calc(var(--sp) * 12);
    }
  }
}

// 50rem
@media (max-width: 800px) {
  .main-pane:has(+ .main-pane + .right-sidebar-container),
  .right-sidebar-container + .main-pane {
    .content-panel:first-child {
      padding-top: calc(var(--sp) * 10);
    }
  }
}

/* -------------------------------------------------------
.sl-container */
// 72rem
.main-pane .sl-container {
  margin-inline: 0;
  margin: 0 auto;
  max-width: calc(var(--sp) * 128);
}

// target .sl-container where there is a right-sidebar
.main-pane:has(+ .main-pane + .right-sidebar-container),
.right-sidebar-container + .main-pane {
  .sl-container {
    max-width: var(--sl-content-width);
  }
}

//////////////////////////////////////////////////////////////////////////////////////////
// HEADER
header.header {
  background-color: var(--colorBg);
  border-bottom: none;
  max-width: min(100vw, var(--content-max-width));
  left: max(0px, calc((100vw - var(--content-max-width)) / 2));
}

@media (min-width: 72rem) {
  header.header {
    background-color: rgba(var(--colorBgRgb) / 0.4);
    backdrop-filter: blur(var(--blur1));
  }
}

header .header {
  grid-template-columns:
    calc(var(--Sidebar-width) - var(--sl-nav-pad-x))
    1fr calc(var(--PageSidebar-width) - var(--sl-nav-pad-x));

  *:nth-child(2) {
    justify-content: center;

    site-search button {
      max-width: 10rem;
      border: none;

      outline: none;

      background: transparent;

      border: 1px solid var(--aj-palette-block-level2-border);
      height: calc(var(--sp) * 4);

      color: var(--aj-palette-txt-tertiary);

      transition: all var(--time-sm) var(--easing-default);

      svg {
        color: inherit;
      }

      &:hover,
      &:focus {
        border: 1px solid var(--aj-palette-block-level3-border);
        color: var(--aj-palette-txt-primary);
      }

      &:active {
        border: 1px solid var(--aj-palette-block-level2-border);
        color: var(--aj-palette-txt-secondary);
      }
    }
  }

  .social-icons {
    a {
      color: var(--aj-palette-txt-secondary);
      transition: all var(--time-sm) var(--easing-default);

      outline: none;

      &:hover,
      &:focus {
        color: var(--aj-palette-txt-primary);
        opacity: 1;
      }

      &:focus:not(:active) {
        background: var(--aj-palette-block-level2-bg);
        border-radius: calc(var(--sp) * 0.5);
      }

      &:active {
        color: var(--aj-palette-txt-secondary);
        opacity: 1;
      }

      svg {
        color: inherit;
      }
    }
  }
}

.title-wrapper {
  margin-left: calc(var(--sp) * -1.25);
  overflow: visible;

  a {
    outline: none;
    position: relative;

    &:focus:not(:active) {
      &:before {
        content: "";
        position: absolute;
        top: calc(var(--sp) * -0.75);
        right: calc(var(--sp) * -1.25);
        bottom: calc(var(--sp) * -0.5);
        left: calc(var(--sp) * -1.25);

        background: var(--aj-palette-block-level2-bg);
        border-radius: calc(var(--sp) * 0.5);

        z-index: 0;
      }

      & > * {
        z-index: 10;
      }
    }
  }
}

.site-title img {
  width: auto;
  height: calc(var(--sp) * 3.5);
}

.header .right-group {
  justify-content: flex-end;
}

starlight-theme-select {
  display: inline-flex;
  vertical-align: top;
  align-items: center;
}

//////////////////////////////////////////////////////////////////////////////////////////
// SIDEBAR
.sidebar-pane {
  background: var(--sl-color-bg-sidebar);
  border-right: 1px solid
    rgba(var(--aj-palette-input-primary-solid-border) / 0.2);
  left: max(0px, calc(50vw - var(--content-max-width) / 2));
}

@media (min-width: 50rem) {
  .sidebar-pane {
    width: var(--Sidebar-width);
    top: calc(var(--Header-height) + var(--sp) * 3);
    bottom: calc(var(--sp) * 3);
  }
}

.sidebar-content {
  padding: 0;
  gap: 0;
  min-height: 0;

  &:after {
    padding: 0;
  }

  // Custom sidebar
  .aj-sidebar.aj-custom {
    height: 100%;
    box-sizing: border-box;

    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;

    & > * {
      width: 100%;
    }

    .top-level {
      width: 100%;
    }

    &:before,
    &:after {
      content: "";
      position: absolute;
      z-index: 10;
      pointer-events: none;
      left: 0;
      width: 100%;
      height: calc(var(--sp) * 4);
    }

    &:before {
      top: 0;
      background: var(--scrollable-fade-top);
    }

    &:after {
      bottom: 93px;
      background: var(--scrollable-fade-bottom);
    }

    sl-sidebar-state-persist {
      position: relative;
      padding: 0 var(--sl-sidebar-pad-x);
      padding-top: calc(var(--sp) * 4.5);
      padding-bottom: calc(var(--sp) * 4.5);
      display: block;
      flex: 0 1 auto;
      height: 100%;
      overflow: auto;
    }

    .mobile-preferences {
      padding: 0 calc(var(--sl-sidebar-pad-x) + var(--sp));
    }

    // Section heading
    summary {
      margin-top: 0;
      pointer-events: none;
    }
    details summary {
      margin-top: calc(var(--sp) * 1.5);
      pointer-events: none;
      outline: none;
    }
    summary svg {
      display: none;
    }
    summary .group-label span {
      color: var(--aj-palette-text-tertiary);
      text-transform: uppercase;
      font-size: 0.75rem;
    }

    // Readjust other headings
    summary + ul summary {
      margin-top: 0;
      pointer-events: all;

      border-radius: calc(var(--sp) * 0.5);
      transition: all var(--time-sm) var(--easing-default);

      outline: none;
    }
    summary + ul details summary {
      margin-top: 0;
    }
    summary + ul summary svg {
      display: block;
    }
    summary + ul summary .group-label span {
      color: var(--aj-palette-txt-secondary);
      text-transform: none;
      font-size: 1rem;
    }
    summary + ul summary + ul summary .group-label span {
      color: var(--aj-palette-txt-secondary);
      text-transform: none;
      font-size: 0.875rem;
    }

    summary + ul summary:has(+ ul a[aria-current="page"]) .group-label span {
      color: var(--aj-palette-txt-primary);
    }

    summary + ul summary:has(+ ul a.feature) {
      display: flex;
      flex-flow: row nowrap;
      align-items: flex-start;
      gap: calc(var(--sp) * 0.75);

      &:before {
        content: "";
        width: calc(var(--sp) * 1.75);
        height: calc(var(--sp) * 1.75);

        display: inline-block;
        vertical-align: top;
        margin-top: 0.1em;
      }

      .group-label {
        flex: 1 1 auto;
      }
    }

    // Items spacing
    ul li,
    ul li ul li {
      margin-top: calc(var(--sp) * 0.5);
    }
    ul li a {
      padding: calc(var(--sp) * 0.3) var(--sl-sidebar-item-padding-inline);

      outline: none;

      border-radius: calc(var(--sp) * 0.5);
      color: var(--aj-palette-txt-secondary);
    }
    summary + ul li {
      padding-left: 0;
      margin-left: 0;
      border-left-width: 0px;
    }

    // Readjust level 2+ items spacing
    ul li ul li ul li {
      margin-top: 0;
    }
    summary + ul summary + ul li {
      padding-left: var(--sp);
      margin-left: var(--sp);
    }

    // Style items
    summary + ul li a {
      padding: calc(var(--sp) * 0.3) var(--sl-sidebar-item-padding-inline);
      margin: calc(var(--sp) * 0.2) 0;
      border-radius: calc(var(--sp) * 0.5);

      transition: all var(--time-sm) var(--easing-default);

      outline: none;

      color: var(--sidebar-link-l1-idleColor);
      font-weight: 600;
      font-size: 1rem;
    }

    // Readjust level 2+ items style
    summary + ul li summary + ul li a {
      padding: calc(var(--sp) * 0.3) var(--sl-sidebar-item-padding-inline);
      color: var(--aj-palette-txt-tertiary);
      font-size: 0.875rem;
    }

    // All selected items style
    ul li a[aria-current="page"],
    summary + ul li a[aria-current="page"] {
      color: var(--aj-palette-txt-primary);
      background: var(--sidebar-link-selectedBg);
      cursor: default;
      pointer-events: none;
    }

    ul li a:hover,
    ul li a:focus,
    summary + ul summary:hover,
    summary + ul summary:focus,
    summary + ul li a:hover:not([aria-current="page"]),
    summary + ul li a:focus:not([aria-current="page"]) {
      background: var(--sidebar-link-hoverBg);
    }

    ul li a:active,
    summary + ul summary:active,
    summary + ul li a:active:not([aria-current="page"]) {
      background: var(--sidebar-link-activeBg);
    }

    // External linking sidebar items
    .external-link {
      display: flex;
      flex-flow: row nowrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: calc(var(--sp) * 1.25);

      &:after {
        display: inline-block;
        margin-right: calc(var(--sp) * 0.5);
      }
    }
  }

  // Readjust default sidebar padding
  .aj-sidebar:not(.aj-custom) {
    padding: 1rem var(--sl-sidebar-pad-x) 0;
  }
}

@media (max-width: 1151px) {
  .sidebar-content {
    .aj-sidebar.aj-custom {
      &:before {
        height: calc(var(--sp) * 2.5);
      }

      sl-sidebar-state-persist {
        padding-top: calc(var(--sp) * 0.5);
      }
    }
  }
}

@media (min-width: 50rem) {
  .sidebar-content {
    .aj-sidebar.aj-custom {
      &:after {
        bottom: 44px;
      }
    }
  }
}

:root[data-theme="dark"] {
  .aj-sidebar {
    // External linking sidebar items
    .external-link {
      &:after {
        content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 128 128' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.5527 96.4395L96.0369 31.9553' stroke='%23827C8C' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M57.4629 31.6903L96.3029 31.6903L96.3029 70.5304' stroke='%23827C8C' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E%0A");
      }
    }
  }

  .sidebar-content {
    .aj-sidebar.aj-custom {
      summary + ul summary:has(+ ul a.feature.bot-protection) {
        &:before {
          content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 128 128' fill='none' stroke='none' xmlns='http://www.w3.org/2000/svg' %3E%3Ccircle cx='64' cy='64' r='16' stroke='none' fill='%23bfb9c8' /%3E%3Cpath d='M21.9563 21.9563L64 4.5412L106.044 21.9563L123.459 64L106.044 106.044L64 123.459L21.9563 106.044L4.5412 64L21.9563 21.9563Z' fill='none' stroke='%23bfb9c8' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
        }
      }
      summary + ul summary:has(+ ul a.feature.rate-limiting) {
        &:before {
          content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 128 128' fill='none' stroke='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M106.766 107.134C98.2353 115.665 87.3662 121.474 75.5333 123.828C63.7005 126.182 51.4354 124.974 40.2891 120.357C29.1428 115.74 19.6159 107.921 12.9132 97.8898C6.2104 87.8584 2.63281 76.0647 2.63281 64C2.63281 51.9354 6.2104 40.1416 12.9132 30.1102C19.6159 20.0788 29.1428 12.2603 40.2891 7.64338C51.4354 3.02643 63.7005 1.81843 75.5333 4.17212C87.3662 6.52582 98.2353 12.3355 106.766 20.8665' fill='none' stroke='%23bfb9c8' stroke-linecap='round' stroke-dasharray='2 3' vector-effect='non-scaling-stroke' /%3E%3Ccircle cx='112.299' cy='26.1667' r='10.6667' stroke='none' fill='%23bfb9c8' /%3E%3Ccircle cx='64' cy='64' r='16' stroke='none' fill='%23bfb9c8' /%3E%3C/svg%3E");
        }
      }
      summary + ul summary:has(+ ul a.feature.shield-waf) {
        &:before {
          content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 128 128' fill='none' stroke='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.8676 63.4835L20.8672 63.4835L20.8667 63.4836C19.196 63.6552 17.5655 63.8227 16 64C17.5655 64.1773 19.196 64.3448 20.8667 64.5164L20.8672 64.5165L20.8676 64.5165L20.8677 64.5165C32.9126 65.7539 47.0426 67.2054 53.9186 74.0814C60.7939 80.9567 62.2455 95.0842 63.483 107.129C63.6548 108.801 63.8225 110.433 64 112C64.1775 110.433 64.3452 108.801 64.517 107.129C65.7545 95.0842 67.2061 80.9567 74.0814 74.0814C80.9574 67.2054 95.0874 65.7539 107.132 64.5165C108.803 64.3448 110.434 64.1773 112 64C110.434 63.8227 108.804 63.6552 107.133 63.4835L107.132 63.4835L107.132 63.4835C95.0874 62.2461 80.9574 60.7946 74.0814 53.9186C67.2061 47.0433 65.7545 32.9158 64.517 20.8713C64.3452 19.1991 64.1775 17.567 64 16C63.8225 17.567 63.6548 19.1991 63.483 20.8713C62.2455 32.9158 60.7939 47.0433 53.9186 53.9186C47.0426 60.7946 32.9126 62.2461 20.8677 63.4835L20.8676 63.4835Z' stroke='none' fill='%23bfb9c8' /%3E%3Ccircle cx='64.002' cy='64' r='58' fill='none' stroke='%23bfb9c8' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
        }
      }
      summary + ul summary:has(+ ul a.feature.email-validation) {
        &:before {
          content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 128 128' fill='none' stroke='none' xmlns='http://www.w3.org/2000/svg' %3E%3Ccircle cx='64' cy='64' r='16' stroke='none' fill='%23bfb9c8' /%3E%3Cpath d='M64 120C33.0721 120 8 94.9279 8 64C8 33.0721 33.0721 8 64 8C94.9279 8 120 33.0721 120 64M77.5172 67.628C77.5172 79.3593 87.0273 88.8694 98.7586 88.8694C110.49 88.8694 120 79.3593 120 67.628V64.0878' fill='none' stroke='%23bfb9c8' vector-effect='non-scaling-stroke' stroke-linecap='round' /%3E%3C/svg%3E");
        }
      }
      summary + ul summary:has(+ ul a.feature.signup-form-protection) {
        &:before {
          content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 128 128' fill='none' stroke='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M55.5482 22.8235C55.5482 32.6672 47.5683 40.6471 37.7246 40.6471C27.881 40.6471 19.9011 32.6672 19.9011 22.8235C19.9011 12.9799 27.881 5 37.7246 5C47.5683 5 55.5482 12.9799 55.5482 22.8235ZM56.5482 22.8235C56.5482 33.2195 48.1206 41.6471 37.7246 41.6471C27.3287 41.6471 18.9011 33.2195 18.9011 22.8235C18.9011 12.4276 27.3287 4 37.7246 4C48.1206 4 56.5482 12.4276 56.5482 22.8235ZM5.00401 83.0002C5.12587 67.94 8.01998 58.7538 13.2978 53.2887C18.6767 47.7189 26.7552 45.7845 37.7255 45.7845C48.6958 45.7845 56.7743 47.7189 62.1532 53.2887C67.431 58.7538 70.3251 67.94 70.447 83.0002H5.00401ZM37.7255 44.7845C59.5809 44.7845 71.2013 52.3733 71.447 83.0002C71.4496 83.3308 71.451 83.6641 71.451 84.0002H70.451H5H4C4 83.6641 4.00133 83.3308 4.00398 83.0002C4.24971 52.3733 15.87 44.7845 37.7255 44.7845Z' vector-effect='non-scaling-stroke' fill='none' stroke='%23bfb9c8' /%3E%3Cg clipPath='url(%23clip0_407_11061)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M59.6507 91.6126L59.6501 91.6127C58.3971 91.7414 57.1742 91.867 56 92C57.1741 92.133 58.3971 92.2586 59.6501 92.3873L59.6507 92.3874C68.6844 93.3154 79.282 94.4041 84.439 99.5611C89.5954 104.718 90.6841 115.313 91.6122 124.347C91.7411 125.601 91.8669 126.825 92 128C92.1331 126.825 92.2589 125.601 92.3878 124.347C93.3159 115.313 94.4046 104.718 99.5611 99.5611C104.718 94.4041 115.316 93.3154 124.349 92.3874C125.603 92.2586 126.826 92.133 128 92C126.826 91.867 125.603 91.7414 124.349 91.6126C115.316 90.6846 104.718 89.5959 99.5611 84.439C94.4046 79.2825 93.3159 68.6868 92.3878 59.6535C92.2589 58.3993 92.1331 57.1752 92 56C91.8669 57.1752 91.7411 58.3993 91.6122 59.6535C90.6841 68.6868 89.5954 79.2825 84.439 84.439C79.282 89.5959 68.6844 90.6846 59.6507 91.6126Z' stroke='none' fill='%23bfb9c8' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_407_11061'%3E%3Crect width='72' height='72' transform='translate(56 56)' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
        }
      }
      summary + ul summary:has(+ ul a.feature.sensitive-information) {
        &:before {
          content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 128 128' fill='none' stroke='none' xmlns='http://www.w3.org/2000/svg' %3E%3Ccircle cx='64.002' cy='64' r='60' stroke='%23bfb9c8' fill='none' vector-effect='non-scaling-stroke' /%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M64 87.478C84.9868 87.478 102 63.994 102 63.994C102 63.994 84.9868 40.51 64 40.51C43.0132 40.51 26 63.994 26 63.994C26 63.994 43.0132 87.478 64 87.478ZM64 82C73.9411 82 82 73.9411 82 64C82 54.0589 73.9411 46 64 46C54.0589 46 46 54.0589 46 64C46 73.9411 54.0589 82 64 82Z' fill='%23bfb9c8' stroke='none' /%3E%3C/svg%3E");
        }
      }
      summary + ul summary:has(+ ul a.feature.filters) {
        &:before {
          content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 128 128' fill='none' stroke='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='64.002' cy='64' r='60' stroke='%23bfb9c8' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M47 63.9994H4M124 64L97 64' stroke='%23bfb9c8' vector-effect='non-scaling-stroke' stroke-linecap='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M97.4814 64.001L45.5195 94.001V34.001L97.4814 64.001ZM49.9395 64.001C49.9396 71.2496 55.8158 77.126 63.0645 77.126C70.3131 77.126 76.1894 71.2496 76.1895 64.001C76.1895 56.7522 70.3132 50.876 63.0645 50.876C55.8157 50.876 49.9395 56.7522 49.9395 64.001Z' fill='%23bfb9c8'/%3E%3C/svg%3E%0A");
        }
      }

      summary
        + ul
        summary:has(+ ul a.feature.bot-protection):has(
          + ul a[aria-current="page"]
        ) {
        &:before {
          content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 128 128' fill='none' stroke='none' xmlns='http://www.w3.org/2000/svg' %3E%3Ccircle cx='64' cy='64' r='16' stroke='none' fill='%23ffffff' /%3E%3Cpath d='M21.9563 21.9563L64 4.5412L106.044 21.9563L123.459 64L106.044 106.044L64 123.459L21.9563 106.044L4.5412 64L21.9563 21.9563Z' fill='none' stroke='%23ffffff' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
        }
      }
      summary
        + ul
        summary:has(+ ul a.feature.rate-limiting):has(
          + ul a[aria-current="page"]
        ) {
        &:before {
          content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 128 128' fill='none' stroke='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M106.766 107.134C98.2353 115.665 87.3662 121.474 75.5333 123.828C63.7005 126.182 51.4354 124.974 40.2891 120.357C29.1428 115.74 19.6159 107.921 12.9132 97.8898C6.2104 87.8584 2.63281 76.0647 2.63281 64C2.63281 51.9354 6.2104 40.1416 12.9132 30.1102C19.6159 20.0788 29.1428 12.2603 40.2891 7.64338C51.4354 3.02643 63.7005 1.81843 75.5333 4.17212C87.3662 6.52582 98.2353 12.3355 106.766 20.8665' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-dasharray='2 3' vector-effect='non-scaling-stroke' /%3E%3Ccircle cx='112.299' cy='26.1667' r='10.6667' stroke='none' fill='%23ffffff' /%3E%3Ccircle cx='64' cy='64' r='16' stroke='none' fill='%23ffffff' /%3E%3C/svg%3E");
        }
      }
      summary
        + ul
        summary:has(+ ul a.feature.shield-waf):has(
          + ul a[aria-current="page"]
        ) {
        &:before {
          content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 128 128' fill='none' stroke='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.8676 63.4835L20.8672 63.4835L20.8667 63.4836C19.196 63.6552 17.5655 63.8227 16 64C17.5655 64.1773 19.196 64.3448 20.8667 64.5164L20.8672 64.5165L20.8676 64.5165L20.8677 64.5165C32.9126 65.7539 47.0426 67.2054 53.9186 74.0814C60.7939 80.9567 62.2455 95.0842 63.483 107.129C63.6548 108.801 63.8225 110.433 64 112C64.1775 110.433 64.3452 108.801 64.517 107.129C65.7545 95.0842 67.2061 80.9567 74.0814 74.0814C80.9574 67.2054 95.0874 65.7539 107.132 64.5165C108.803 64.3448 110.434 64.1773 112 64C110.434 63.8227 108.804 63.6552 107.133 63.4835L107.132 63.4835L107.132 63.4835C95.0874 62.2461 80.9574 60.7946 74.0814 53.9186C67.2061 47.0433 65.7545 32.9158 64.517 20.8713C64.3452 19.1991 64.1775 17.567 64 16C63.8225 17.567 63.6548 19.1991 63.483 20.8713C62.2455 32.9158 60.7939 47.0433 53.9186 53.9186C47.0426 60.7946 32.9126 62.2461 20.8677 63.4835L20.8676 63.4835Z' stroke='none' fill='%23ffffff' /%3E%3Ccircle cx='64.002' cy='64' r='58' fill='none' stroke='%23ffffff' vector-effect='non-scaling-stroke' /%3E%3C/svg%3E");
        }
      }
      summary
        + ul
        summary:has(+ ul a.feature.email-validation):has(
          + ul a[aria-current="page"]
        ) {
        &:before {
          content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 128 128' fill='none' stroke='none' xmlns='http://www.w3.org/2000/svg' %3E%3Ccircle cx='64' cy='64' r='16' stroke='none' fill='%23ffffff' /%3E%3Cpath d='M64 120C33.0721 120 8 94.9279 8 64C8 33.0721 33.0721 8 64 8C94.9279 8 120 33.0721 120 64M77.5172 67.628C77.5172 79.3593 87.0273 88.8694 98.7586 88.8694C110.49 88.8694 120 79.3593 120 67.628V64.0878' fill='none' stroke='%23ffffff' vector-effect='non-scaling-stroke' stroke-linecap='round' /%3E%3C/svg%3E");
        }
      }
      summary
        + ul
        summary:has(+ ul a.feature.signup-form-protection):has(
          + ul a[aria-current="page"]
        ) {
        &:before {
          content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 128 128' fill='none' stroke='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M55.5482 22.8235C55.5482 32.6672 47.5683 40.6471 37.7246 40.6471C27.881 40.6471 19.9011 32.6672 19.9011 22.8235C19.9011 12.9799 27.881 5 37.7246 5C47.5683 5 55.5482 12.9799 55.5482 22.8235ZM56.5482 22.8235C56.5482 33.2195 48.1206 41.6471 37.7246 41.6471C27.3287 41.6471 18.9011 33.2195 18.9011 22.8235C18.9011 12.4276 27.3287 4 37.7246 4C48.1206 4 56.5482 12.4276 56.5482 22.8235ZM5.00401 83.0002C5.12587 67.94 8.01998 58.7538 13.2978 53.2887C18.6767 47.7189 26.7552 45.7845 37.7255 45.7845C48.6958 45.7845 56.7743 47.7189 62.1532 53.2887C67.431 58.7538 70.3251 67.94 70.447 83.0002H5.00401ZM37.7255 44.7845C59.5809 44.7845 71.2013 52.3733 71.447 83.0002C71.4496 83.3308 71.451 83.6641 71.451 84.0002H70.451H5H4C4 83.6641 4.00133 83.3308 4.00398 83.0002C4.24971 52.3733 15.87 44.7845 37.7255 44.7845Z' vector-effect='non-scaling-stroke' fill='none' stroke='%23ffffff' /%3E%3Cg clipPath='url(%23clip0_407_11061)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M59.6507 91.6126L59.6501 91.6127C58.3971 91.7414 57.1742 91.867 56 92C57.1741 92.133 58.3971 92.2586 59.6501 92.3873L59.6507 92.3874C68.6844 93.3154 79.282 94.4041 84.439 99.5611C89.5954 104.718 90.6841 115.313 91.6122 124.347C91.7411 125.601 91.8669 126.825 92 128C92.1331 126.825 92.2589 125.601 92.3878 124.347C93.3159 115.313 94.4046 104.718 99.5611 99.5611C104.718 94.4041 115.316 93.3154 124.349 92.3874C125.603 92.2586 126.826 92.133 128 92C126.826 91.867 125.603 91.7414 124.349 91.6126C115.316 90.6846 104.718 89.5959 99.5611 84.439C94.4046 79.2825 93.3159 68.6868 92.3878 59.6535C92.2589 58.3993 92.1331 57.1752 92 56C91.8669 57.1752 91.7411 58.3993 91.6122 59.6535C90.6841 68.6868 89.5954 79.2825 84.439 84.439C79.282 89.5959 68.6844 90.6846 59.6507 91.6126Z' stroke='none' fill='%23ffffff' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_407_11061'%3E%3Crect width='72' height='72' transform='translate(56 56)' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
        }
      }
      summary
        + ul
        summary:has(+ ul a.feature.sensitive-information):has(
          + ul a[aria-current="page"]
        ) {
        &:before {
          content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 128 128' fill='none' stroke='none' xmlns='http://www.w3.org/2000/svg' %3E%3Ccircle cx='64.002' cy='64' r='60' stroke='%23ffffff' fill='none' vector-effect='non-scaling-stroke' /%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M64 87.478C84.9868 87.478 102 63.994 102 63.994C102 63.994 84.9868 40.51 64 40.51C43.0132 40.51 26 63.994 26 63.994C26 63.994 43.0132 87.478 64 87.478ZM64 82C73.9411 82 82 73.9411 82 64C82 54.0589 73.9411 46 64 46C54.0589 46 46 54.0589 46 64C46 73.9411 54.0589 82 64 82Z' fill='%23ffffff' stroke='none' /%3E%3C/svg%3E");
        }
      }
      summary
        + ul
        summary:has(+ ul a.feature.filters):has(+ ul a[aria-current="page"]) {
        &:before {
          content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 128 128' fill='none' stroke='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='64.002' cy='64' r='60' stroke='%23ffffff' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M47 63.9994H4M124 64L97 64' stroke='%23ffffff' vector-effect='non-scaling-stroke' stroke-linecap='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M97.4814 64.001L45.5195 94.001V34.001L97.4814 64.001ZM49.9395 64.001C49.9396 71.2496 55.8158 77.126 63.0645 77.126C70.3131 77.126 76.1894 71.2496 76.1895 64.001C76.1895 56.7522 70.3132 50.876 63.0645 50.876C55.8157 50.876 49.9395 56.7522 49.9395 64.001Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
        }
      }
    }
  }
}

:root[data-theme="light"] {
  .aj-sidebar {
    // External linking sidebar items
    .external-link {
      &:after {
        content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 128 128' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.5527 96.4395L96.0369 31.9553' stroke='%236E6979' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M57.4629 31.6903L96.3029 31.6903L96.3029 70.5304' stroke='%236E6979' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E%0A");
      }
    }
  }
}

//////////////////////////////////////////////////////////////////////////////////////////
// RIGHT SIDEBAR
@media (min-width: 72rem) {
  .right-sidebar-container {
    width: var(--PageSidebar-width);
  }

  .right-sidebar-container {
    right: max(0px, calc(0px + ((100vw - var(--content-max-width)) / 2)));
    position: fixed;
  }
}

.right-sidebar {
  border-left: 1px solid
    rgba(var(--aj-palette-input-primary-solid-border) / 0.2);

  top: calc(var(--Header-height) + var(--sp) * 3);
  bottom: calc(var(--sp) * 3);

  height: auto;
  padding: 0;
}

@media (min-width: 72rem) {
  .right-sidebar-container .right-sidebar {
    width: var(--PageSidebar-width);
  }
}

@media (min-width: 72rem) {
  .right-sidebar-container,
  .right-sidebar-container .right-sidebar {
    width: var(--PageSidebar-width);
  }

  .right-sidebar-container {
    right: max(0px, calc(0px + ((100vw - var(--content-max-width)) / 2)));
    position: fixed;
  }
}

.right-sidebar-panel starlight-toc {
  a {
    color: var(--aj-palette-txt-tertiary);

    transition: all var(--time-sm) var(--easing-default);

    outline: none;

    padding-inline: var(--pad-inline) var(--pad-inline);
    margin: calc(var(--sp) * 0.2) 0;
    margin-left: calc(1rem * var(--depth));
    border-radius: calc(var(--sp) * 0.5);
  }

  a:hover,
  a:focus {
    background: var(--sidebar-link-hoverBg);
    color: var(--aj-palette-txt-tertiary);
  }

  a:active {
    background: var(--sidebar-link-activeBg);
  }

  a[aria-current="true"] {
    color: var(--aj-palette-txt-primary);
    background: var(--sidebar-link-selectedBg);
  }
}

.right-sidebar-panel starlight-toc h2,
.toc-label {
  font-size: 0.75rem;
  color: var(--aj-palette-txt-quaternary);
  text-transform: uppercase;
  font-family: var(--sl-heading);
  font-weight: 600;
}

// Only for default Starlight right sidebar
.right-sidebar .right-sidebar-panel {
  padding: calc(var(--sp) * 5) calc(var(--sp) * 4);
}

// Only for default Starlight right sidebar
mobile-starlight-toc nav {
  border: none;
  background-color: rgba(var(--colorBgRgb) / 0.4);
  backdrop-filter: blur(var(--blur1));
  top: var(--Header-height);
  padding-top: calc(var(--sp) * 3);

  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
      rgba(var(--colorBgRgb) / 1) 8px,
      rgba(var(--colorBgRgb) / 0)
    );
  }

  & > * {
    position: relative;
    z-index: 10;
  }

  summary {
    gap: calc(var(--sp) * 2);
    align-items: center;
    border: 0px;
    padding: calc(var(--sp) * 1) var(--sl-content-pad-x) calc(var(--sp) * 3);
    height: auto;

    .toggle {
      border: none;
      background: var(--aj-palette-block-level2-blurBg);

      transition: all var(--time-sm) var(--easing-default);

      &:hover,
      &:focus {
        background: var(--aj-palette-block-level3-blurBg);
      }

      &:active {
        opacity: 0.8;
      }
    }
  }

  .dropdown {
    background: transparent;
    border: 0px;

    padding: 0 var(--sl-content-pad-x) calc(var(--sp) * 3);

    .isMobile {
      a {
        border: 0px;

        border-radius: calc(var(--sp) * 0.5);
        color: var(--aj-palette-txt-tertiary);

        transition: all var(--time-sm) var(--easing-default);

        outline: none;

        padding: calc(var(--sp) * 1) calc(var(--sp) * 1);
        margin: calc(var(--sp) * 0.2) 0;
        margin-left: calc(1rem * var(--depth));

        &:hover,
        &:focus {
          background: var(--sidebar-link-hoverBg);
          color: var(--aj-palette-txt-tertiary);
        }

        &:active {
          background: var(--sidebar-link-activeBg);
        }

        &[aria-current="true"] {
          color: var(--aj-palette-txt-primary);
          background: var(--sidebar-link-selectedBg);
        }
      }
    }
  }
}

//////////////////////////////////////////////////////////////////////////////////////////
// HEADINGS
h1,
.sl-container > h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--sl-heading);
  font-weight: 500;
}

h1,
.sl-container > h1 {
  margin-top: calc(var(--sp) * 2);
  font-size: calc(var(--sp) * 5);
  line-height: var(--sl-line-height-headings);

  text-transform: uppercase;
  font-size: 30px;
  font-weight: var(--aj-fontWeight-lg);

  color: var(--aj-palette-txt-secondary);
}

h2,
.sl-markdown-content h2 {
  font-size: 28px;
}

h3,
.sl-markdown-content h3 {
  font-size: 22px;
  line-height: 1.5em;
}

h4,
.sl-markdown-content h4 {
  font-size: 20px;
  text-transform: uppercase;
  line-height: 1.3em;

  color: var(--aj-palette-txt-secondary);
}

h5,
.sl-markdown-content h5 {
  font-size: 18px;
  line-height: 1.3em;
}

h6,
.sl-markdown-content h6 {
  font-size: 14px;
  line-height: 1.3em;
  text-transform: uppercase;

  color: var(--aj-palette-txt-secondary);
}

.sl-markdown-content
  :not(h1, h2, h3, h4, h5, h6)
  + :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
  margin-top: 2.5em;
}

//////////////////////////////////////////////////////////////////////////////////////////
// LINKS
.link:link:not(.Button),
.link:visited:not(.Button),
.sl-markdown-content a:link:not(:where(.not-content *)):not(.Button),
.sl-markdown-content a:visited:not(:where(.not-content *)):not(.Button) {
  font-weight: 500;
  color: var(--aj-palette-txt-primary);

  --underline-color: var(--aj-palette-txt-primaryRgb);
  --Link-underlineOpacity: 0.3;

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: rgb(
    var(--underline-color) / var(--Link-underlineOpacity)
  );

  transition: all var(--time-sm) var(--easing-default);
}

.link:hover:not(.Button),
.link:focus:not(.Button),
.sl-markdown-content a:hover:not(:where(.not-content *)):not(.Button),
.sl-markdown-content a:focus:not(:where(.not-content *)):not(.Button) {
  color: var(--aj-palette-txt-secondary);
}

.link:focus:not(:active):not(.Button),
.sl-markdown-content
  a:focus:not(:active):not(:where(.not-content *)):not(.Button) {
  position: relative;
  outline: none;
  color: var(--aj-palette-txt-primary);

  &:before {
    content: "";
    position: absolute;
    top: -0.1em;
    right: -0.25em;
    bottom: -0.15em;
    left: -0.25em;

    background: var(--aj-palette-block-level2-bg);
    border-radius: calc(var(--sp) * 0.5);

    z-index: -1;
  }

  & > * {
    position: relative;
    z-index: 10;
  }
}

.link:active:not(.Button),
.sl-markdown-content a:active:not(:where(.not-content *)):not(.Button) {
  color: var(--aj-palette-txt-tertiary);
}

//////////////////////////////////////////////////////////////////////////////////////////
// APPEARANCE
.sl-markdown-content code {
  border-radius: 4px;
}

.sl-markdown-content :not(a, strong, em, del, span, input, code) + img {
  margin: calc(var(--sp) * 6) 0;
}

[data-theme="dark"]:root .sl-markdown-content img.dark {
  display: block;
}

[data-theme="light"]:root .sl-markdown-content img.dark {
  display: none;
}

[data-theme="light"]:root .sl-markdown-content img.light {
  display: block;
}

[data-theme="dark"]:root .sl-markdown-content img.light {
  display: none;
}

@media (min-width: 50rem) {
  .hero {
    padding-block: clamp(2.5rem, calc(1rem + 6vmin), 6rem);
  }
}

.sl-markdown-content .badge img {
  margin-top: 0px;
}

// Selects on Windows, linux, etc.
:root[data-theme="dark"] {
  select {
    --dropdown-bg: var(--aj-palette-source-neutral-01);
    --dropdown-option-hoverBg: var(--aj-palette-source-neutral-03);
    --dropdown-option-checkedBg: var(--aj-palette-source-neutral-02);
    --dropdown-option-color: var(--aj-palette-source-white);
  }
}

:root[data-theme="light"] {
  select {
    --dropdown-bg: var(--aj-palette-source-neutral-14);
    --dropdown-option-hoverBg: var(--aj-palette-source-neutral-12);
    --dropdown-option-checkedBg: var(--aj-palette-source-neutral-13);
    --dropdown-option-color: var(--aj-palette-source-black);
  }
}

select {
  background: var(--dropdown-bg);
}

select option {
  background: transparent;
  color: var(--dropdown-option-color);
}

select option:checked {
  background: var(--dropdown-option-checkedBg);
  color: var(--dropdown-option-color);
}

select option:hover,
select option:focus-visible {
  background: var(--dropdown-option-hoverBg);
  color: var(--dropdown-option-color);
}
