@use '../variables';

.markdown-preview {
  @media screen and (min-width: variables.$desktop-min-width) {
    max-width: 40rem;
  }

  &:empty {
    display: none;
  }

  &__title {
    margin-bottom: 0.5rem;
  }

  &__inner {
    background: var(--accent);
    max-height: 20rem;
    overflow: auto;
    padding: 1rem 1rem 0;
    scrollbar-color: var(--primary) var(--accent);
    scrollbar-width: thin;

    > :last-child {
      // workaround for bottom padding not working with overflow
      margin-bottom: 1rem;
    }
  }
}