/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
:host {
  --digi--code-example--background: var(--digi--color--background--primary);
  --digi--code-example--controls--width: 16.25rem;
  display: block;
}

.digi-code-example {
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  border: var(--digi--border-width--primary) solid var(--digi--color--divider--primary--light);
  height: 100%;
  display: flex;
  flex-direction: row;
  border-radius: 0.3rem;
  position: relative;
}
@media (max-width: 35.9375rem) {
  .digi-code-example {
    min-width: 360px;
  }
}
.digi-code-example--light {
  background-color: #ffffff;
  background-image: linear-gradient(45deg, #efefef 25%, transparent 25%), linear-gradient(-45deg, #efefef 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #efefef 75%), linear-gradient(-45deg, transparent 75%, #efefef 75%);
}
.digi-code-example--dark {
  background-color: #787777;
  background-image: linear-gradient(45deg, #666666 25%, transparent 25%), linear-gradient(-45deg, #666666 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #666666 75%), linear-gradient(-45deg, transparent 75%, #666666 75%);
}
.digi-code-example__container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  position: relative;
}
.digi-code-example--no-controls {
  flex-direction: column;
}
.digi-code-example--no-controls .digi-code-example__copy-button {
  margin-top: 0;
  align-self: flex-end;
  margin-bottom: 0.2rem;
  z-index: 1;
  position: absolute;
  bottom: 0;
  right: 0;
}
.digi-code-example--no-controls .digi-code-example__copy-button--dark {
  --digi--button--color--text--function--default: var(--digi--color--text--secondary);
  --digi--button--color--text--function--hover: var(--digi--color--text--secondary);
  --digi--button--color--icon--function--default: var(--digi--color--text--secondary);
  --digi--button--color--icon--function--hover: var(--digi--color--text--secondary);
}
.digi-code-example__example {
  padding: var(--digi--padding--largest-2);
  overflow-x: auto;
}
@media (max-width: 48rem) {
  .digi-code-example__example {
    padding: var(--digi--padding--medium);
  }
}
@media (max-width: 35.9375rem) {
  .digi-code-example__example {
    padding: var(--digi--padding--small);
  }
}
.digi-code-example__copy-button {
  align-self: start;
  margin-top: var(--digi--padding--large);
  margin-right: var(--digi--padding--small);
}
.digi-code-example__codeblock digi-code-block {
  --digi--code-block--border-radius: 0;
  --digi--code-block--border: none;
}
.digi-code-example__controls {
  padding: var(--digi--padding--medium);
  background: var(--digi--color--background--secondary);
  display: flex;
  flex: 0 var(--digi--code-example--controls--width);
  flex-direction: column;
  align-self: stretch;
  flex-shrink: 0;
  justify-content: space-between;
  gap: var(--digi--gutter--medium);
}
@media (max-width: 48rem) {
  .digi-code-example__controls {
    padding: var(--digi--padding--smaller);
  }
}
.digi-code-example__controls[hidden] {
  display: none;
}
.digi-code-example--inactive .digi-code-example__code {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.digi-code-example--inactive .digi-code-example__codeblock {
  flex-grow: 1;
  height: 64px;
  overflow-y: hidden;
  position: relative;
}
.digi-code-example__code-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--digi--gutter--icon);
  width: 100%;
  padding: 0.875rem 0;
  background: #272727;
  color: var(--digi--color--text--secondary);
  font-size: var(--digi--typography--body--font-size--desktop);
  font-family: var(--digi--global--typography--font-family--default);
  cursor: pointer;
  border: none;
}
.digi-code-example__code-expand:hover {
  background: var(--digi--grayscale--900);
  text-decoration: underline;
}
.digi-code-example__code-expand:focus-visible {
  outline: 2px solid black;
  outline-offset: -3px;
  box-shadow: 0px 0px 0px 5px inset white;
}

.digi-code-example--no-controls.digi-code-example--inactive .digi-code-example__codeblock {
  height: 64px;
}

.digi-code-example__copy-button {
  --digi--button--padding--small: 0;
  --digi--button--padding--medium: 0;
  --digi--button--padding--large: 0;
}

.digi-code-example__code-expand-icon {
  --digi--icon--color: var(--digi--color--text--secondary);
  transition: ease-in-out var(--digi--animation--duration--base) all;
}
.digi-code-example__code-expand-icon--open {
  transform: rotate(180deg);
}

.digi-code-example__fade {
  position: absolute;
  width: 100%;
  bottom: 0;
  height: var(--digi--padding--largest-2);
}
.digi-code-example__fade--light {
  background-image: linear-gradient(0deg, white, transparent);
}
.digi-code-example__fade--dark {
  --digi--color--background--inverted-3: #272727;
  background-image: linear-gradient(0deg, var(--digi--grayscale--900), transparent);
}

.slot__controls {
  margin-bottom: var(--digi--padding--smaller);
}

::slotted(* .slot__controls) {
  display: flex;
  flex-direction: column;
  gap: var(--digi--padding--smaller);
}

::slotted(* .slot__controls[hidden]) {
  display: none;
}

::slotted(* .slot__controls digi-form-fieldset),
::slotted(* .slot__controls digi-form-select),
::slotted(* .slot__controls digi-form-fieldset + digi-form-checkbox),
::slotted(* .slot__controls .divider) {
  display: block;
  border-bottom: 1px solid var(--digi--color--divider--primary--light);
  padding-bottom: var(--digi--padding--smaller);
  margin-bottom: var(--digi--padding--medium);
}