@use '../style/variable' as *;
@use '../style/mixin' as *;

#sources {
  font-size: 0;
  @include overflow-auto(y);
  color: var(--foreground);
  .code-wrapper,
  .raw-wrapper {
    @include overflow-auto(x);
    width: 100%;
    min-height: 100%;
  }
  .raw,
  .code {
    height: 100%;
    .keyword {
      color: var(--keyword-color);
    }
    .comment {
      color: var(--comment-color);
    }
    .number {
      color: var(--number-color);
    }
    .string {
      color: var(--string-color);
    }
    .operator {
      color: var(--operator-color);
    }
    &[data-type='html'] {
      .keyword {
        color: var(--tag-name-color);
      }
    }
  }
  .image {
    font-size: $font-size-s;
    .breadcrumb {
      @include breadcrumb();
    }
    .img-container {
      text-align: center;
      img {
        max-width: 100%;
      }
    }
    .img-info {
      text-align: center;
      margin: 20px 0;
      color: var(--foreground);
    }
  }
  .json {
    padding: 0 $padding;
    * {
      user-select: text;
    }
  }
  iframe {
    width: 100%;
    height: 100%;
  }
}