/* Dark theme overrides */
[data-theme="dark"] .code-preview {
  --code-preview-btn-color: #b4bcc6;
  --code-preview-btn-selected-color: #fff;
  --code-preview-btn-selected-background: #434f5e;

  --code-preview-btn-icon-color: #b4bcc6;
  --code-preview-btn-icon-hover-background: rgba(67, 79, 93, 0.5);

  --code-preview-separator-color: #434f5e;

  --code-preview-code-background: rgb(22, 29, 37);
}

.code-preview {
  /**
   * @prop --code-preview-btn-color The text color of the button in the toolbar.
   * @prop --code-preview-btn-selected-color The text color of the button in the toolbar when selected.
   * @prop --code-preview-btn-selected-background The background color of the button in the toolbar when selected.
   * @prop --code-preview-btn-icon-color The text color of the button icon in the toolbar.
   * @prop --code-preview-btn-icon-hover-background The background color of the button icon in the toolbar when hovered.
   * @prop --code-preview-separator-color The color of the separator/border in the toolbar.
   * @prop --code-preview-code-background The background color of the code block when expanded.
   */
  --code-preview-btn-color: #2d4665;
  --code-preview-btn-selected-color: #1b6dff;
  --code-preview-btn-selected-background: #e3edff;
  --code-preview-btn-icon-hover-background: #e9edf3;
  --code-preview-btn-icon-color: #445b78;
  --code-preview-separator-color: #dee3ea;
  --code-preview-code-background: #f6f8fc;

  overflow: hidden;
}

/* Includes the toolbar and preview container */
.code-preview__container {
  border: 1px solid var(--code-preview-separator-color);
  border-radius: 0.4rem;
}

/* Contains the demo example*/
.code-preview__preview {
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 18px 0;
  padding: 16px 0;
}

.code-preview__control-toolbar {
  display: flex;
  align-items: center;

  padding: 8px 12px;

  border-bottom: 1px solid var(--code-preview-separator-color);

  overflow-x: auto;
}

/* code-preview control group contains a section of buttons in the toolbar */
.code-preview__control-group {
  display: flex;
  min-height: 24px;
}

.code-preview__control-group + .code-preview__control-group {
  padding-left: 12px;
}

/** Vertical divider between control groups */
.code-preview__control-group + .code-preview__control-group:not(.code-preview__control-group--end) {
  /* Only show the vertical divider when there is a control group after it */
  border-left: 1px solid var(--code-preview-separator-color);
}

.code-preview__control-group .code-preview__control-button:last-child {
  margin-right: 12px;
}

.code-preview__control-group--end {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

.code-preview__control-button {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6px 10px;

  color: var(--code-preview-btn-color);
  background-color: transparent;
  border: none;
  border-radius: 100px;

  font-size: 12px;

  appearance: none;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}

/* Fix layout shifting when button is bolded on select */
/* has the same text as the button, but bolded in advance to nudge the width */
.code-preview__control-button::after {
  content: attr(data-text);
  font-weight: 500;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  visibility: hidden;

  height: 0;
}

@media speech {
  .code-preview__control-button::after {
    display: none;
  }
}

.code-preview__control-button--selected {
  background-color: var(--code-preview-btn-selected-background);
  color: var(--code-preview-btn-selected-color);
  font-weight: 500;
}

/* Icon buttons at the end of the toolbar */

.code-preview__icon-button {
  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;

  width: 24px;
  height: 24px;
  padding: 8px 5px;

  border: 0;
  border-radius: 100px;

  cursor: pointer;
  appearance: none;
  transition: background .2s;
}

.code-preview__icon-button--primary {
  stroke: var(--code-preview-btn-icon-color);
}

.code-preview__icon-button:hover {
  background: var(--code-preview-btn-icon-hover-background);
}

/* The code block example that users can copy to clipboard */
.code-preview__code-block {
  /*
   * Height is set to zero instead of display: none so that when copying the contents
   * of the code block to use in Stackblitz, the individual line breaks are preserved.
   * Otherwise when using display: none, the result of el.outerText will not include
   * the individual "\n" line breaks and the code snippet will be one line.
   */
  height: 0px;
  overflow: hidden;
}

.code-preview__code-block--expanded {
  height: initial;
  margin-top: 16px;
}

/* Overwrite existing Docusaurus style */
.code-preview__code-block pre[class*='language-'] {
  background-color: var(--code-preview-code-background);
}

.code-preview iframe {
  box-shadow: none;
  background: transparent;

  width: 100%;
}

.code-preview iframe.frame-hidden {
  display: none;
}

/*
 * Tooltip is inserted into the DOM within the body element.
 * Styles scoped within this component will not be inherited.
 */
.tippy-box[data-theme="code-preview"] {
  background-color: #222d3a;
  border-radius: 8px;
  line-height: initial;
  font-size: 12px;
}

.tippy-box[data-theme="code-preview"] .tippy-content {
  padding: 6px 10px;
}