@define-mixin docs-example-ui-light {
  .docs-example__code {
    background-color: var(--ld-col-neutral-010);
  }

  .docs-example__tools-scroll-container {
    background-color: var(--ld-col-neutral-050);
    border-color: var(--ld-col-neutral-100);
  }

  .docs-example__tools {
    stroke: var(--ld-col-neutral-900);
  }

  .docs-example__tool-buttons,
  .docs-example__tool-switch,
  .docs-example__copy-to-clipboard {
    filter: none;
  }
}
@define-mixin docs-example-ui-dark {
  .docs-example__code {
    background-color: var(--ld-col-neutral-900);
  }

  .docs-example__tools-scroll-container {
    background-color: var(--ld-col-neutral-700);
    border-color: var(--ld-col-neutral-700);
  }

  .docs-example__tools {
    stroke: var(--ld-col-wht);
  }

  .docs-example__tool-buttons,
  .docs-example__tool-switch,
  .docs-example__copy-to-clipboard {
    filter: invert(1) hue-rotate(180deg);
  }

  .docs-example--has-border .docs-example__show {
    border-color: transparent;
  }
}

@mixin docs-example-ui-light;

@media (prefers-color-scheme: dark) {
  @mixin docs-example-ui-dark;
}
.docs-ui-light {
  @mixin docs-example-ui-light;
}
.docs-ui-dark {
  @mixin docs-example-ui-dark;
}

.docs-example {
  display: block;
}

.docs-example__code {
  overflow: hidden;
  display: none;
  border-bottom-left-radius: var(--ld-br-l);
  border-bottom-right-radius: var(--ld-br-l);
  position: relative;

  pre {
    border-bottom-left-radius: var(--ld-br-l);
    border-bottom-right-radius: var(--ld-br-l);
  }
}

.docs-example__tools-scroll-container {
  position: relative;
  overflow: auto;
  display: flex;
  width: 100%;
  border-style: solid;
  border-width: var(--ld-sp-1);
  border-bottom-left-radius: var(--ld-br-l);
  border-bottom-right-radius: var(--ld-br-l);
}

.docs-example__tools {
  padding: var(--ld-sp-8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  line-height: 0; /* Firefox fix */
}

.docs-example__tool-switch {
  background-color: var(--ld-col-wht);
  border-radius: calc(var(--ld-br-m) + 1px);
}

.docs-example__tool-buttons {
  display: flex;
  flex: 1 0;
  align-items: center;
  justify-content: flex-end;

  > :not(:first-child) {
    margin-left: var(--ld-sp-12);
  }
}

.docs-example__show {
  background-color: var(--ld-col-neutral-010);
  color: var(--ld-col-neutral-900);
  border-bottom-width: 0;
  border-top-left-radius: var(--ld-br-l);
  border-top-right-radius: var(--ld-br-l);
  overflow: hidden;
  will-change: transform; /* Fixes overflow in Safari */
  color-scheme: light; /* stylelint-disable-line scale-unlimited/declaration-strict-value */

  .docs-example--has-border & {
    border: var(--ld-sp-1) solid var(--ld-col-neutral-100);
    border-bottom: 0;
  }

  .docs-example--has-padding & {
    padding: 0 var(--ld-sp-8) var(--ld-sp-24);

    @media (width <= 52rem) {
      padding: 0 0 var(--ld-sp-24);
    }

    > div > *:not(.ld-modal) {
      margin: var(--ld-sp-24) var(--ld-sp-24) 0;
      max-width: calc(100% - 2 * var(--ld-sp-24));
    }
  }

  > div {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-evenly;
    width: 100%;
  }
}
.docs-example__show--centered {
  > div {
    align-items: center;
  }
}
.docs-example__show--stacked {
  > div {
    flex-direction: column;
  }
  &:not(.docs-example__show--centered) {
    > div {
      align-items: stretch;
    }
  }
}

.docs-example__show--brand {
  border-color: transparent;

  &.ld-theme-ocean {
    background-color: var(--ld-thm-ocean-primary);
  }
  &.ld-theme-solvent,
  &.ld-theme-bubblegum,
  &.ld-theme-shake {
    background-color: var(--ld-thm-shake-primary);
  }
  &.ld-theme-tea {
    background-color: var(--ld-thm-tea-primary);
  }
}

.docs-example__show--light {
  background-color: var(--ld-col-wht);
}

.docs-example--code-visible {
  .docs-example__tools-scroll-container {
    border-radius: 0;
  }

  .docs-example__code {
    display: block;
  }
}

.docs-example--web-component {
  [slot='showCssComponent'],
  [slot='codeReactComponent'],
  [slot='codeCssComponent'] {
    display: none;
  }
}

.docs-example--react-component {
  [slot='showCssComponent'],
  [slot='codeCssComponent'],
  [slot='code'] {
    display: none;
  }
}

.docs-example--css-component {
  [slot='show'],
  [slot='codeReactComponent'],
  [slot='code'] {
    display: none;
  }
}

.docs-example__code-tools {
  position: absolute;
  display: grid;
  grid-auto-flow: column;
  gap: var(--ld-sp-8);
  top: var(--ld-sp-8);
  right: var(--ld-sp-8);
  margin: var(--ld-sp-2) var(--ld-sp-1);
}

.docs-example__copy-to-clipboard {
  background-color: var(--ld-col-wht);
  border-radius: var(--ld-br-m);
}
