@import (reference) '../style/variables.less';

@media @v-device-show {
  .@{prefix}-mobile-previewer {
    .@{prefix}-previewer-demo {
      display: none;
    }

    .@{prefix}-previewer-desc,
    .@{prefix}-previewer-desc:not([data-title]) + .@{prefix}-previewer-actions {
      border-top: none;
    }

    button[role='source'] {
      margin-right: -8px;
      width: 0;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
    }
  }
}

.adm-doc-previewer {
  display: flex;
  height: 700px;
  margin-bottom: 24px;
  @media only screen and (max-width: 1440px) {
    height: 600px;
  }
  @media only screen and (max-width: 960px) {
    height: 500px;
  }
  width: 100%;
  justify-content: flex-start;
  align-items: stretch;
  border-radius: 12px;
  overflow: hidden;
  --border-color: var(--doc-border-color);
  border: 1px solid var(--border-color);

  &[data-debug] {
    --border-color: #ffcb00;
  }

  > .adm-doc-previewer-source {
    flex: 1;
    overflow-x: scroll;
    .__dumi-default-previewer {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      border-right: none;
      .__dumi-default-previewer-actions {
        border-top: none;
      }
      .__dumi-default-previewer-demo {
        display: none;
      }
      .__dumi-default-previewer-desc {
        display: none;
      }
      > * {
        flex: none;
      }
      > .__dumi-default-previewer-source-wrapper {
        min-height: 0;
        flex: auto;
        display: flex;
        flex-direction: column;
        > .__dumi-default-tabs {
          flex: none;
        }
        > .__dumi-default-previewer-source {
          flex: auto;
          overflow-y: scroll;
          border-bottom-left-radius: 12px;
          .@{prefix}-code-block {
            background: #ffffff;

            [data-prefers-color='dark'] & {
              color: @c-text-dark;
              background: #262626;
            }
          }
        }
      }
    }
  }
  > .adm-doc-previewer-device {
    flex: 0;
    border-left: solid 1px var(--border-color);
  }
}
