@import "../../ui-components/buttons/style.css";

:root {
  --color-black: 0,0,0;
  --color-primary: 77, 54, 255;
  --color-secondary: 31, 22, 102;
  --color-accent: 254, 96, 77;
  --color-dark: 32, 30, 36;
  --color-light: 255,255,255;
  --color-success: 0,214,134;
  --color-danger: 229,10,31;
  --color-warning: 255,193,7;
  --color-info: 0,123,255;
  --color-bkg: var(--color-light);
  --color-text: var(--color-dark);

    --color-success--tint_20: 204, 247, 231;
    --color-danger--tint_20: 250, 206, 210;
    --color-warning--tint_20: 255, 243, 205;
    --color-info--tint_20: 204, 229, 255;
    --color-accent--shade_10: 230, 87, 75;
    --color-primary--shade_20: 62, 43, 204;
    --color-white--shade_10: 232, 232, 233;

    --color-social-facebook: 24, 119, 242;
    --color-social-instagram: 195, 42, 163;
    --color-social-twitter: 29, 161, 242;
    --color-social-linkedin: 0, 119, 181;
    --color-social-googlebusiness: 66, 133, 244;
    --color-social-pinterest: 189, 8, 28;
    --color-social-tiktok: 0, 0, 0;
    --color-social-youtube: 255, 0, 0;

  

  --elevation-alpha: .15;

  --font-default: "IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --font-serif: "IBM Plex Serif",serif;
  --font-mono: "IBM Plex Mono",monospace;

  --font-weight-default: 400;
  --font-weight-bold: 500; 

  --line-height-default: 1.5;
  --line-height-reset: 1;
  --line-height-auto: 1.2; 

  --elevation-sm:  0 0.0625em .125em 0 rgba(var(--color-black),var(--elevation-alpha));
  --elevation-default:  0 0.0625em .125em 0 rgba(var(--color-black),var(--elevation-alpha)), 
                        0 .25em 1em 0 rgba(var(--color-black),var(--elevation-alpha));
  --elevation-lg:  0 0.0625em .125em 0 rgba(var(--color-black),var(--elevation-alpha)), 
                        0 .25em 1em 0 rgba(var(--color-black),var(--elevation-alpha)), 
                        0 2em 2em -.5em rgba(var(--color-black),var(--elevation-alpha));
  --elevation-xl:  0 0.0625em .125em 0 rgba(var(--color-black),var(--elevation-alpha)), 
                        0 .25em 1em 0 rgba(var(--color-black),var(--elevation-alpha)), 
                        0 2em 2em -.5em rgba(var(--color-black),var(--elevation-alpha)),
                        0 3em 3em -.75em rgba(var(--color-black),var(--elevation-alpha));
  --elevation-none:  0 0 0 0 rgba(var(--color-black),0);

}
:focus {
  outline: none;
  box-shadow: 0 0 0 .125em rgba(var(--color-primary),.2);
}
::selection {
  background-color: rgba(var(--color-primary));
  color: rgb(var(--color-light));
}
/************ Scrollbar ***********/
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--color-text),.2) transparent;
}
*:hover {
  scrollbar-color: rgba(var(--color-text),.4) transparent;
}
/* Webkit */
::-webkit-scrollbar {
  width: .375rem;
}
::-webkit-scrollbar:horizontal {
  height: .375rem;
}
::-webkit-scrollbar-track {
  background: transparent; 
}
::-webkit-scrollbar-thumb {
  background: rgba(var(--color-text),.2); 
  border-radius: 7em;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--color-text),.4); 
}
/*********************************/
html {
  font-size: 16px;
}
body {
  font-family: var(--font-default);
  color: rgb(var(--color-text));
  font-size: 1rem;
  line-height: var(--line-height-default);
  letter-spacing: -.1pt;
  background-color: rgb(var(--color-bkg));
}

a[target="_blank"]:after {
  content: " ↗︎";
}

.app-name-link img {
  max-width: 9rem;
  min-height: 4rem;
  margin: auto;
}
.sidebar {
  background-color: rgba(var(--color-light),.95);
  color: var(--color-text);
  border-right-color: rgba(var(--color-text),.2);
  -webkit-backdrop-filter: blur(.5rem);
  backdrop-filter: blur(.5rem);
}
.sidebar>h1 a {
  display: flex;
  width: 100%;
}
.sidebar-nav .sds-button {
  margin: 0 0 1rem;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
}
input {
  color: rgb(var(--color-text));
  background-color: rgba(var(--color-text),.1);
  font-family: var(--font-sans);
  transition: background-color ease-in-out .15s;
}
input.success {
  background-color: rgba(var(--color-success),.2);
}
input.error {
  background-color: rgba(var(--color-danger),.2);
}
input.warning {
  background-color: rgba(var(--color-warning),.2);
}
input.info {
  background-color: rgba(var(--color-info),.2);
}

input::placeholder {
  color: rgba(var(--color-text),.4);
}
input:focus::placeholder {
  color: rgba(var(--color-dark),.4);
}
.sidebar ul li a {
  color: rgba(var(--color-text),1);
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  text-transform: none;
  height: 3rem;
  display: flex;
  align-items: center;
  flex: 1;
  margin-right: -1rem;
}
ul.app-sub-sidebar li {
  display: flex;
  align-items: center;
}
.search {
  border-bottom-color: rgba(var(--color-text),.2) !important;
}

body.close .sidebar-toggle {
  display: none;
}
.sidebar-toggle .sidebar-toggle-button:hover {
  opacity: 1;
}
.sidebar ul ul {
  margin-left: 0;
}
.sidebar ul {
  margin: 0;
}

.sidebar ul ul {
  position: relative;
}


.active > .app-sub-sidebar .app-sub-sidebar {
  margin-left: 1.5rem;
}
.sidebar ul ul ul li:before {
  content: "";
  margin-right: .5em;
  display: inline-flex;
  background: rgba(var(--color-text),.2);
  width: 1em;
  height: 1px;
}
.sidebar ul ul ul li:last-of-type:after {
  content: "";
  width: 1px;
  height: calc(100% - 1rem);
  background: rgba(var(--color-text),.2);
  display: inline-flex;
  position: absolute;
  bottom: 1.5rem;
}
.sidebar .sidebar-nav > ul > li > p {
  font-weight: var(--font-weight-default);
  font-size: .75em;
  text-transform: uppercase;
  color: rgba(var(--color-text),.4);
  letter-spacing: .025em;
  margin-top: 1rem;
}

section.cover {
  background-color: rgb(var(--color-primary)) !important;
  background-attachment: fixed !important;
  color: white;
  animation: coverBkg 20s linear infinite;
}
section.cover.has-mask .mask { 
  display: none; 
}

section.cover h1 {
  font-weight: var(--font-weight-bold);
  font-size: 3em;
  color: white;
  text-align: left;
}
.sds-logo--ds {
  width: 2em;
  margin-bottom: .5em;
}

section.cover h1 + small {
  text-align: left;
  margin: 1em auto auto;
  width: 100%;
  display: flex;
  align-items: center;
}
section.cover h1 + small .sds-logo {
  margin-left: .5em;
  width: 5em;
}
.sds-claim {
  text-align: left;
  line-height: var(--line-height-auto);
  display: inherit;
}
.anchor span {
  color: currentColor;
}
section.cover h1 small {
  bottom: auto;
  font-size: smaller;
  position: relative;
  font-weight: var(--font-weight-default);
}
section.cover .cover-main {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 3em;
}
section.cover p {
  margin: 0;
}
section.cover  .cover-main > p,
section.cover .cover-main > div { 
  text-align: left;
  margin: 2em auto 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
section.cover .cover-main > div { 
  margin-top: 1rem;
}

.sds-text__highlight {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-default);
}

section.cover .cover-main>p:last-child a {
  border-radius: 7rem;
  border: 1px solid white;
  color: white;
  display: inline-flex;
  font-size: 1em;
  margin: 1em 0 0;
  padding: calc(1em - 1px) calc(1.5em - 1px);
  text-decoration: none;
  transition: all .15s ease;
  line-height: 1;
  font-weight: var(--font-weight-bold);
  letter-spacing: -.3px;
}
section.cover .cover-main>p:last-child a:last-child {
  border-color: transparent;
  background-color: rgb(var(--color-accent));
  margin-left: 1em
}
section.cover .cover-main>p:last-child a:last-child:hover {
  opacity: 1;
}

/****** SEARCH-BAR ******/
.search {
  padding: 0 !important;
  position: sticky;
  -webkit-position: sticky;
  top: 0;
  backdrop-filter: blur(1em);
  z-index: 99999;
  background-color: rgba(var(--color-light),.95);
} 
.search input[type="search"] {
  height: 2.5em;
  padding: 0 1em 0 2em;
  font-size: 1.5em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(49,49,49,.2)' fill-rule='evenodd' d='M15.762 17.176A8.501 8.501 0 014.49 4.49a8.5 8.5 0 0112.686 11.272l3.531 3.53a1 1 0 01-1.414 1.415l-3.53-3.53zm-.666-2.08a6.5 6.5 0 10-9.192-9.192 6.5 6.5 0 009.192 9.192z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1em 1em;
  background-position: .5em;
}
.search input[type="search"]:focus {
  box-shadow: none;
  background-color: rgba(var(--color-primary), .1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(49,49,49,.2)' fill-rule='evenodd' d='M15.762 17.176A8.501 8.501 0 014.49 4.49a8.5 8.5 0 0112.686 11.272l3.531 3.53a1 1 0 01-1.414 1.415l-3.53-3.53zm-.666-2.08a6.5 6.5 0 10-9.192-9.192 6.5 6.5 0 009.192 9.192z'/%3E%3C/svg%3E");
  border-color: transparent;
  caret-color: rgb(var(--color-primary));
}
 .search .input-wrap .clear-button {
  position: absolute;
  width: auto;
  right: .5em;
  cursor: pointer;
}
.search .input-wrap .clear-button.show {
  display: inline-flex;
}
.search .input-wrap .clear-button svg {
  transform: none;
}
.search .results-panel {
  padding: 1em !important;
}
.search .input-wrap .clear-button svg circle {
  fill: rgba(var(--color-text), .2);
}
.search .input-wrap .clear-button svg path {
  stroke-linecap: round;
}
.search .input-wrap input[type="search"]:focus + .clear-button svg circle {
  fill: rgb(var(--color-primary));
}
.search p.empty {
  color: rgba(var(--color-text),.4);
  font-style: italic;
}
.search div.matching-post {
  border-bottom-color: rgba(var(--color-text),.2);
}
.search .matching-post p {
  font-size: .875em;
  color: rgba(var(--color-text),.4);
}
.search .matching-post h2 {
  font-size: .75em;
  margin: 1em 0;
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0;
  font-weight: var(--font-weight-default);
  color: rgba(var(--color-text),.4);
}
.search .results-panel {
  background-color: rgba(var(--color-text),.05);
}


.markdown-section {
  padding: 2em 2em 3em;
}
.markdown-section code, 
.markdown-section pre,
.markdown-section pre>code {
  letter-spacing: 0;
  font-family: var(--font-mono);
  color: rgb(var(--color-text));
  max-height: 60vh;
}
.markdown-section code, 
.markdown-section pre {
  background-color: rgba(var(--color-text),.1);
  border-radius: .25em;
}
.markdown-section pre {
  padding: 0;
}
.markdown-section pre>code {
  padding: 2.2em 1.4rem;
  margin: 0;
  background-color: transparent;
  color: rgb(var(--color-text));
  /*mix-blend-mode: soft-light;*/
}
.markdown-section h1, 
.markdown-section h2, 
.markdown-section h3, 
.markdown-section h4, 
.markdown-section strong {
  color: inherit;
}
.docsify-copy-code-button {
  font-size: .6rem !important;
  line-height: 1.2;
  padding: .25rem .5rem !important;
  position: absolute;
  right: .25rem !important;
  top: .25rem !important;
  font-family: var(--font-mono) !important;
  border-radius: .25rem !important;
}
.docsify-copy-code-button .success {
  font-size: inherit !important;
}
.docsify-copy-code-button span {
  background-color: transparent !important;
}
.markdown-section p.warn {
  border-radius: .25rem;
  background-color: rgba(var(--color-success),.2);
}
.markdown-section blockquote {
  border-left-width: 2px;
  color: rgb(var(--color-text));
  margin: 2em 0;
  padding: .125em 2em;
  font-size: 2em;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-default);
}
.markdown-section em {
  color: inherit;
}
.pagination-item:last-child .pagination-item-label, 
.pagination-item:not(:last-child) a:hover .pagination-item-label {
  opacity: 1;
}
.pagination-item--next .pagination-item-label {
  justify-content: flex-end;
}
.pagination-item-label span {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-default);
  color: rgba(var(--color-text),.5);
  font-size: 1em;
  text-transform: lowercase;
}
.pagination-item-label svg {
  height: 1.5em !important;
  width: 1.5em !important;
}

.token.tag,
.token.attr-name {
  color: rgb(var(--color-info));
}
.token.punctuation {
  color: rgba(var(--color-text),.5);
}
.docsify-pagination-container {
  border-top-color: rgba(var(--color-text),.1) !important;
}

.markdown-section h1 {
  font-size: 3rem;
  line-height: 1.05784;
} 
.markdown-section h2 {
  font-size: 2rem;
  line-height: 1.2;
} 
.markdown-section h3 {
  font-size: 1.75rem;
  line-height: 1.25714;
} 
.markdown-section h4 {
  font-size: 1.375rem;
  line-height: 1.2;
}
.markdown-section h5 {
  font-size: 1.125rem;
  line-height: 1.44444;
}
.markdown-section ol, 
.markdown-section p, 
.markdown-section ul {
  line-height: inherit;
  word-spacing: inherit;
}
a.anchor {
  color: inherit;
}

.sds-quickstart {
    margin: 2em 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12em,1fr));
    grid-gap: .5em;
}
.sds-quickstart ul,
.sds-quickstart li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sds-quickstart__item {
    display: flex;
    padding: 1em 1.5em;
    box-shadow: var(--elevation-sm);
    border-radius: .25em;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow .15s ease-in-out;
    color: rgb(var(--color-text)) !important;
    text-decoration: none;
    font-weight: var(--font-weight-default) !important;
}
.sds-quickstart__item:hover {
    box-shadow: var(--elevation-lg);
    z-index: 1;
}
.sds-quickstart__thumbnail {
    width: calc(100% + 3em);
    margin: -1em -1.5em 1em;
    position: relative;
    background: rgba(var(--color-text),.05);
}
.sds-quickstart__item .sds-quickstart__desc {
    display: flex;
    flex-direction: column;
}
.sds-quickstart__item .sds-quickstart__desc small {
    color: rgba(var(--color-text),.5);
    font-size: .75em;
    margin-top: .5em;
    margin-bottom: 1.5em;
    line-height: 1;
    font-weight: var(--font-weight-default);
      display: flex;
    align-items: center;
}
.sds-quickstart__item .sds-quickstart__desc small .sds-icon { 
  width: 1.5em;
  height: 1.5em;
  margin-right: .5em;
}
.sds-quickstart .sds-small-title {
  color: rgba(var(--color-text),.5);
  font-size: .75em;
  margin-bottom: .5em;
  margin-top: 1.5em;
  line-height: 1;
  font-weight: var(--font-weight-default);
  display: flex;
  align-items: center;
  text-transform: uppercase;
  grid-column: 1 / -1;
}


.flex-column {
  flex-direction: column;
}
.justify-space-between {
  justify-content: space-between;
}












@media screen and (max-width: 768px) {
  body.close {
    overflow: hidden;
  }
  body .sidebar,
  body .content {
    /* left: 0; */
  }
  body.close .sidebar {
    /* transform: translate(18rem);  */
    left: 0;
  }
  body.close .content {
    transform: translate(0); 
  }
  main {
    z-index: 1;
  }
  body.close .sidebar-toggle {
    display: flex;
  }
  body.close .sidebar-toggle {
    background-color: rgb(var(--color-accent));
  }
  body main:after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    background: rgb(var(--color-dark),.9);
    z-index: 1;
    -webkit-backdrop-filter: blur(.25rem);
    backdrop-filter: blur(.25rem);
    pointer-events: none;
    transition: opacity .3s ease-in-out;
  }
  body.close main:after {
    opacity: 1;
    pointer-events: all;
  }
  .sidebar-toggle {
    background-color: rgba(var(--color-light));
    color: rgba(var(--color-text));
    box-shadow: var(--elevation-default);
    right: 1em;
    transform: none;
    background-color: rgb(var(--color-accent));
    color: rgb(var(--color-light));
    font-size: 1rem;
    padding: 1em;
    transition: background-color ease-in-out .15s,
                box-shadow ease-in-out .15s,
                left ease-in-out .25s,
                transform ease-in-out .25s;
    width: 3.75em;
    height: 3.75em;
    border-radius: 4.5em;
    bottom: 2rem;
    cursor: pointer;
  }

  .sidebar-toggle-button {
    display: flex;
    flex-direction: column;
    margin: auto;
  }
  .sidebar-toggle span {
    background-color: currentColor;
    border-radius: 2em;
    margin: .125em auto;
  }
  body.close .sidebar-toggle span:first-child {
    transform: translateY(calc(.125em + 4px)) rotate(45deg);
  }
  body.close .sidebar-toggle span:first-child + span {
    opacity: 0;
  }
  body.close .sidebar-toggle span:last-child {
    transform: translateY(calc(-.125em - 4px)) rotate(-45deg);
  }
}
















@media (prefers-color-scheme: dark) {
  :root {
    --color-text: 255,255,255;
    --elevation-alpha: .4;
    --color-bkg: var(--color-dark);
  }
  :focus {
    box-shadow: 0 0 0 .125em rgba(var(--color-accent),.2);
  }
  ::selection {
    background-color: rgba(var(--color-accent));
  }
  input::placeholder {
    color: rgba(var(--color-text),.3);
  }
  .markdown-section a,
  .sidebar ul li.active>a,
  .token.attr-value, .token.control, .token.directive, .token.unit,
  .search .search-keyword, .search a:hover {
    color: rgb(var(--color-accent));
  }
  .search {
    background-color: rgba(var(--color-dark),.95);
  } 
  .search input[type="search"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(255,255,255,.2)' fill-rule='evenodd' d='M15.762 17.176A8.501 8.501 0 014.49 4.49a8.5 8.5 0 0112.686 11.272l3.531 3.53a1 1 0 01-1.414 1.415l-3.53-3.53zm-.666-2.08a6.5 6.5 0 10-9.192-9.192 6.5 6.5 0 009.192 9.192z'/%3E%3C/svg%3E");
  }
  .search input[type="search"]:focus {
    background-color: rgb(var(--color-text));
    color: rgb(var(--color-dark));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(49,49,49,.2)' fill-rule='evenodd' d='M15.762 17.176A8.501 8.501 0 014.49 4.49a8.5 8.5 0 0112.686 11.272l3.531 3.53a1 1 0 01-1.414 1.415l-3.53-3.53zm-.666-2.08a6.5 6.5 0 10-9.192-9.192 6.5 6.5 0 009.192 9.192z'/%3E%3C/svg%3E");
  }

  input.success {
    background-color: rgb(var(--color-success--tint_20));
  }
  input.error {
    background-color: rgb(var(--color-danger--tint_20));
  }
  input.warning {
    background-color: rgb(var(--color-warning--tint_20));
  }
  input.info {
    background-color: rgb(var(--color-info--tint_20));
  }
  input.success, input[type="search"].success,
  input.error, input[type="search"].error,
  input.warning, input[type="search"].warning,
  input.info, input[type="search"].info {
    color: rgb(var(--color-dark));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(49,49,49,.2)' fill-rule='evenodd' d='M15.762 17.176A8.501 8.501 0 014.49 4.49a8.5 8.5 0 0112.686 11.272l3.531 3.53a1 1 0 01-1.414 1.415l-3.53-3.53zm-.666-2.08a6.5 6.5 0 10-9.192-9.192 6.5 6.5 0 009.192 9.192z'/%3E%3C/svg%3E");
  }
  input.success::placeholder,
  input.error::placeholder,
  input.warning::placeholder,
  input.info::placeholder {
    color: rgba(var(--color-dark),.4);
  }
  .markdown-section p.warn {
    background-color: rgba(var(--color-success),.9);
  }
  .sidebar {
    background-color: rgba(var(--color-dark),.95);
  }
  .sidebar-toggle {
    background-color: rgba(var(--color-dark));
  }
  
  a.anchor {
    color: inherit;
  }
}

@keyframes sidebarToggleUp {
  0% {
    transform: translateY(calc(.125em + 4px)) rotate(45deg);
  }
  50% {
    transform: translateY(calc(.125em + 4px));
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes sidebarToggleDown {
  0% {
    transform: translateY(calc(-.125em - 4px)) rotate(-45deg);
  }
  50% {
    transform: translateY(calc(-.125em - 4px));
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes coverBkg {
  0% {
    background-position: top center;
  }
  50% {
    background-position: bottom center;
  }
  100% {
    background-position: top center;
  }
}