@use 'vars' as *

.import
  p, li, code
    user-select: text

  section
    margin-top: 3rem

    aside
      margin-bottom: 3rem

    > div:last-child
      display: flex

      @include mobile
        flex-direction: column

      > div
        flex: 1
        padding: 0 5rem

        @include mobile
          padding: 0
          padding-top: 4rem

        &:first-child
          padding-left: 0

          @include mobile
            padding: 0

        &:last-child
          border-left: 1px solid $mid2
          padding-right: 0

          @include mobile
            border: none
            border-top: 1px solid $mid2

  code
    font-family: $monoFont
    font-size: 1.3rem

  details
    margin-top: 2rem

  summary
    margin-bottom: 1rem

  ol
    list-style: lower-roman

  li
    margin-bottom: 1.6rem

.dropZone
  border: 1px dashed $mid2
  display: flex
  align-items: center
  justify-content: center
  text-align: center
  margin-bottom: 4rem
  height: 15rem
  transition: border-color .2s

  *
    user-select: none

  h3
    font-size: 2.2rem
    font-style: italic
    margin-bottom: 1rem

  &.active
    border-color: $fg

  @include touch
    display: none
