@use "src/styles/variables" as *;

.vm-trace-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;

  @media (max-width: 768px) {
    padding: $padding-medium 0;
  }

  &-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: $padding-global;
    margin-bottom: $padding-medium;

    @media (max-width: 768px) {
      grid-template-columns: 1fr;
      padding: 0 $padding-medium;
    }

    &-errors {
      display: grid;
      align-items: flex-start;
      justify-content: stretch;
      grid-template-columns: 1fr;
      gap: $padding-medium;

      @media (max-width: 768px) {
        grid-row: 2;
      }

      &-item {
        position: relative;
        display: grid;
        align-items: center;
        justify-content: stretch;

        &_margin-bottom {
          margin-bottom: $padding-global;
        }

        &__filename {
          min-height: 20px;
        }

        &__close {
          position: absolute;
          top: auto;
          right: $padding-small;
          z-index: 2;
        }
      }
    }
  }

  &-preview {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: calc(($vh * 50) - var(--scrollbar-height));

    &__text {
      margin-bottom: $padding-global;
      font-size: $font-size;
      white-space: pre-line;
      text-align: center;
      line-height: 1.8;
    }
  }

  &__dropzone {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset $color-primary 0 0 10px;
    opacity: 0.5;
    z-index: 100;
    pointer-events: none;
  }
}
