@import "_variables_legacy.scss";
@import "_variables_designsystem.scss";

.ds-theme-icon {
  width: $font-size-icon;
  height: $font-size-icon;
  flex-shrink: 0;
}

.ds-theme-dropdown summary:after {
  display: none;
}

details[open].ds-theme-dropdown .dropdown-menu {
  left: auto;
  right: 0;
  min-width: 0;
}

.ds-theme-dropdown .dropdown-link {
  width: 100%;
  border: 0;
  background-color: transparent;
  cursor: pointer;

  & > span:last-child {
    margin-left: $icon-spacing;
  }
}

details.ds-theme-dropdown .icon {
  width: $font-size-icon;
}

.ds-theme-dropdown summary [data-theme-icon] {
  display: inline-flex;
}

@each $theme in light, dark, system {
  html:not([data-theme-choice="#{$theme}"]) [data-theme-icon="#{$theme}"] {
    display: none;
  }

  html[data-theme-choice="#{$theme}"] [data-theme-option="#{$theme}"] {
    color: $link-hover-color;
  }
}


html.dark {
  .app-body {
    background-color: $gray-900;
    color: $gray-300;
  }

  .section-header .section-title,
  h1, h2, h3, h4, h5, h6 {
    color: $white;
  }

  .section-header .section-title {
    background-color: $gray-900;
  }

  .border-color,
  .section-header::after {
    border-color: $border-color-dark;
  }
}


.ds-card-codeexample {
  padding: $spacing-sm;
  border-radius: $border-radius;
  background-color: $gray-lightest;

  html.dark & {
    background-color: $gray-800;
  }

  pre {
    margin: 0;
    padding: $spacing;
    border-radius: $border-radius;
    overflow-x: auto;
  }

  code {
    white-space: pre;
    font-size: $font-size-xs;
  }

  pre[class*="language-"] {
    color: $gray-300;
    background: $gray-darkest;

    html.dark & {
      background: $black;
    }
  }

  .token.tag,
  .token.selector {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: #e2777a;
  }
  .token.attr-name,
  .token.boolean { color: #ffd479; }
  .token.attr-value,
  .token.string { color: #7ec699; }
  .token.punctuation { color: $gray-500; }
  .token.comment { color: $gray-600; }

  .nav-pills {
    margin-bottom: $spacing-xxs;
  }

  .code-copy-label {
    line-height: $font-size-icon-xs;
  }

  .code-copy {
    padding: $spacing-xs $spacing-sm;
  }
}

.header .DocSearch-Button {
  width: $btn-height;
  height: $btn-height;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: $border-radius;
  background: transparent;
  color: $white;
  justify-content: center;
}

.header .DocSearch-Button:hover,
.header .DocSearch-Button:focus-visible {
  color: $white;
  background-color: $petrol-dark;
  box-shadow: none;
}

.header .DocSearch-Button .DocSearch-Search-Icon {
  width: $font-size-icon;
  height: $font-size-icon;
  color: $white;
}

.header .DocSearch-Button-Placeholder,
.header .DocSearch-Button-Keys {
  display: none;
}

.ds-card-codeexample .nav-pills .navlink {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: inherit;
  outline: none;

  &.active {
    text-decoration: underline;
    text-underline-offset: 4px;
    background-color: transparent;
  }

  &:hover,
  &:focus-visible {
    background-color: $gray-300;

    html.dark & {
      background-color: $black;
    }
  }

  &:focus {
    background-color: transparent;
  }
}