.flex {
  display: flex;
  flex-direction: column;
}

.code-mirror-wrapper {
  position: relative;
}

.code-mirror-wrapper__code-mirror {
  height: 100%;
}

.code-mirror-wrapper__button-group {
  display: flex;
  column-gap: 0.2rem;
  position: absolute;
  right: calc(var(--ifm-pre-padding) / 2);
  top: calc(var(--ifm-pre-padding) / 2);
}

.code-mirror-wrapper__button-group__button {
  display: flex;
  align-items: center;
  background: var(--prism-background-color);
  color: var(--prism-color);
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: var(--ifm-global-radius);
  padding: 0.4rem;
  line-height: 0;
  transition: opacity 200ms ease-in-out;
  opacity: 0;
  cursor: pointer;
}

.code-mirror-wrapper:hover .code-mirror-wrapper__button-group__button {
  opacity: 0.4;
}

.code-mirror-wrapper__button-group__button:hover {
  opacity: 1 !important;
}

.iframe {
  position: sticky;
  top: var(--ifm-navbar-height);
}

@media (min-width: 768px) {
  .flex {
    flex-direction: row;
  }

  .code-mirror-wrapper {
    min-width: 50%;
  }

  .iframe {
    flex: 1;
  }
}

@media (min-width: 997px) {
  .flex {
    position: absolute;
    inset: 0;
  }
}
