@import '_tokens/tokens';
@import '_tokens/icons';
@import 'vendor/prism-okaidia';

.fizz-styles body {
  background-color: white;
}

.docs-header {
  background-color: $color-background-brand;
  color: $color-text-inverse;
}

.docs-header a {
  color: inherit;
}

.docs-footer {
  background-color: $color-background-subdued;
  color: $color-text-inverse;
  font-size: $text-small-font-size;
  line-height: $text-small-line-height;
}

.docs-aside ul {
  list-style: none;
  padding-left: 0;
  font-size: $text-medium-font-size;
  line-height: $text-medium-line-height;
  margin-left: -#{$gutter-medium};
  margin-right: -#{$gutter-medium};
}

.docs-aside a {
  color: inherit;
  text-decoration: none;
  display: block;
  padding: $spacing-4 $gutter-medium;
}

.docs-aside [aria-current],
.docs-aside [data-state="active"] {
  background-color: $color-background-brand-secondary;
  color: $color-text-inverse;
}

a.site-title {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

a.site-title:hover {
  text-decoration: none;
}

.site-title svg {
  margin-right: $spacing-8;
}

.site-title span {
  position: relative;
  top: -2px;
}

.palette p {
  border: 1px solid transparent;
  border-radius: $border-radius-medium;
  padding: $spacing-8 $spacing-16;
  font-size: $text-small-font-size;
  line-height: $text-small-line-height;
}

[data-color-name*="-500"],
[data-color-name*="-600"],
[data-color-name*="-700"],
[data-color-name*="-800"],
[data-color-name*="-900"],
[data-color-name*="black"] {
  color: $color-white;
}

blockquote {
  color: $color-text-subdued;
  font-size: $heading-2-font-size;
  line-height: $heading-2-line-height;
  padding: $spacing-16 $spacing-16 $spacing-16 $spacing-32;
  border-left: 4px solid $color-border-success;
}

blockquote strong {
  color: $color-text-body;
}

a:hover > #icon-github {
  transform: scale(1.1);
  transform-origin: center center;
}

.docs-aside nav {
  padding: $gutter-medium;
  margin-bottom: $spacing-32;
}

.release-list time {
  min-width: 120px;
}

@media (min-width: $breakpoint-m) {
  .docs-aside nav {
    padding: 0;
  }  
}

.fizz-details summary {
  list-style: none;
  cursor: pointer;
  padding: $spacing-4 $spacing-8 $spacing-4 $spacing-24;
  background-image: $icon-plus-brand;
  background-repeat: no-repeat;
  background-size: $icon-size-small $icon-size-small;
  background-position: left 50%;
  font-size: $text-medium-font-size;
  line-height: $text-medium-line-height;
  font-weight: $font-weight-semibold;
  margin-bottom: $spacing-4;
  display: inline-block;
  color: $color-text-brand;
}

.fizz-details summary:hover {
  color: $color-text-link;
  background-image: $icon-plus-brand-secondary;
}

.fizz-details summary::-webkit-details-marker {
  display: none;
}

.fizz-details[open] summary {
  background-image: $icon-minus-brand;
}

.fizz-details[open] summary:hover {
  background-image: $icon-minus-brand-secondary;
}

pre.language-html {
  position: relative
}

.copy-button {
  position: absolute;
  top: 0;
  right: 0;
  padding: $spacing-8 $spacing-16;
  background: $color-background-brand-secondary;
  color: $color-text-inverse;
  font-family: $font-family;
  cursor: pointer;
  text-transform: uppercase;
  font-size: $text-small-font-size;
}

.aa-Autocomplete {
  --color-mark: black;
  --color-background: #fff;
  --color-selected: #f5f5fa;
  --color-text: #23263b;
  --color-input-icon: #777;
  --color-source-icon: rgba(80,80,80,0.32);
  --height: 38px;
  --height-icon: 16px;
  --font-size: 16px;
}
.aa-Form {
  height: 38px;
  border: 1px solid #BFBFBF;
  border-radius: 4px;
}
.aa-Form:hover,
.aa-Form:focus-within {
  border-color: #1F9CC6;
}
.aa-Autocomplete .aa-Form:focus-within {
  outline: none;
  border-color: #1F9CC6;
  box-shadow: 0px 0px 6px #0090C3;
}
.aa-SubmitButton {
  padding: 0;
  margin: 0;
  width: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M22 19.6h-1.3l-.4-.4c1.6-1.8 2.5-4.2 2.5-6.8C22.8 6.7 18.2 2 12.4 2S2 6.7 2 12.4s4.7 10.4 10.4 10.4c2.6 0 4.9-.9 6.8-2.5l.4.4V22l8 8 2.4-2.4-8-8zm-9.6 0c-4 0-7.2-3.2-7.2-7.2s3.2-7.2 7.2-7.2 7.2 3.2 7.2 7.2-3.2 7.2-7.2 7.2z' fill='%23002B48'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  background-position: top 50% left 0.75rem;
}
.aa-SubmitButton svg {
  display: none;
}
.aa-ClearButton {
  display: none;
}
.aa-Panel {
  padding: .5rem;
  margin-top: .5rem;
}
.aa-Panel a:hover {
  text-decoration: none;
}
.aa-PanelLayout {
  padding: 0;
}
.aa-Item {
  padding: 0;
}
.aa-Item[aria-selected=true]{
  background-color: #F2F7FB;
}
.aa-ItemIcon {
  display: none;
}
.aa-ItemContent {
  padding: .5rem;
}
.aa-Item .aa-ItemContent mark {
  color: #008FBE;
}
.aa-ItemTitle {
  margin-bottom: .25rem;
}
.aa-ItemDescription {
  color: #595959;
}
.aa-poweredBy {
  padding: 0;
}