/* same trim colors as openfeature.dev */
:root {
  --md-primary-fg-color:        #5d5dff;
  --md-primary-fg-color--light: #5d5dff;
  --md-primary-fg-color--dark:  #5d5dff;
  --md-accent-fg-color:        #8d8dff;
  --md-accent-fg-color--transparent:rgba(141,141,255,0.1);
}

/* override slate (dark) to match openfeature.dev */
[data-md-color-scheme="slate"] {
  --md-default-fg-color:             hsla(240, 15%, 90%, 0.82);
  --md-default-fg-color--light:      hsla(240, 15%, 90%, 0.56);
  --md-default-fg-color--lighter:    hsla(240, 15%, 90%, 0.32);
  --md-default-fg-color--lightest:   hsla(240, 15%, 90%, 0.12);
  --md-default-bg-color:             hsla(240, 4%, 11%);
  --md-default-bg-color--light:      hsla(240, 4%, 11%, 0.54);
  --md-default-bg-color--lighter:    hsla(240, 4%, 11%, 0.26);
  --md-default-bg-color--lightest:   hsla(240, 4%, 11%, 0.07);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}

.output {
  transition: opacity .5s ease-in-out;
  opacity: 0;
}

.output.visible {
  opacity: 1;
}

/* custom css arrow */
.playground-back {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font-size: 0.85rem;
  text-decoration: none;
}
.playground-back::before {
  content: '';
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}