@use "@hope/config";
@use "highlight";
@use "theme";

@import 'reveal.js/dist/reveal.css';

.markdown-enhance-presentation {
  width: 100%;
  height: 400px;
  min-height: 400px;
  transition: all 1s;

  @media (max-width: config.$mobileS) {
    width: calc(100% + 3rem);
    min-height: 300px;
    margin: 0 -1.5rem;
  }

  &.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--grey15);

    svg {
      width: 2.5em;
      height: 2.5em;
      margin: 2.5em auto;
      fill: var(--accent-color);
    }
  }

  .content {
    height: 100%;
  }
}