.bd-example {
  background: var(--maastricht-blue);
  border-radius: 8px;

  pre[class*='language-'] {
    margin-block: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
    border-radius: 0 !important;
    padding: 1em;
  }

  &-toggle {
    position: relative;
    padding: 1em 1em 0 1em;

    input[type='radio'] {
      display: none;
    }

    &-option {
      padding: 4px var(--spacing-xs);
      margin-right: 8px;
      font-weight: normal;
      font-family: var(--font-sans);
      font-size: 0.9em;
      color: #fff;
      background-color: #4c5a63;
      border-radius: 4px;
      cursor: pointer;

      &.--active {
        background-color: var(--burnt-sienna);
      }
    }
  }

  &-code {
    padding: 1em 0;

    &-headline {
      margin: 0 !important;
      background-color: transparent;
      border: none !important;
      padding: 0 !important;

      pre {
        &:after {
          display: block;
          content: '  …';
        }
      }
    }

    section[expanded] {
      pre {
        &:after {
          display: none;
        }
      }
    }
  }

  &-preview {
    padding: 1em;
    margin-bottom: var(--spacing-s);

    iframe {
      background-color: #fff;
      border: none;
      width: 100%;
      min-height: 400px;
    }
  }

  .--hidden {
    display: none;
  }
}
