.importer-dropzone {
  display: flex;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border: 2px dashed var(--disabled-text-color);
  transition:
    padding 0.2s ease-out,
    background 0.2s ease-out;
  text-align: center;
  color: var(--foreground-color);
  background-color: transparent;

  &:focus-within {
    overflow: hidden;
  }

  &.is-active {
    opacity: 0.75;
  }

  &.is-accepted {
    display: block;
    padding: 0;
    border-width: 0;
    background: transparent;
    text-align: left;

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      border-top: 1px solid var(--secondary-color);
      border-bottom: 1px solid var(--secondary-color);
    }

    li {
      line-height: 28px;
      margin-left: 0;
      padding-left: 0;
      height: 28px;
      align-items: center;
      display: flex;
      width: 100%;
      color: var(--primary-color);
      font-size: 16px;
      white-space: nowrap;

      span {
        overflow-x: hidden;
        text-overflow: ellipsis;
      }
    }

    svg {
      height: 17px;
      fill: var(--foreground-color);
      margin-right: 4px;
      flex-shrink: 0;
    }

    .error-message {
      margin: 10px 16px 16px auto;
      border: 0;

      li {
        font-size: 14px;
        display: block;
        height: auto;
        line-height: initial;

        &:not(:last-child) {
          margin-bottom: 10px;
        }
      }
    }
  }

  .drop-instructions {
    max-width: 205px;
    margin-top: 8px;

    span {
      color: var(--accent-color);
    }
  }
}

.importer-dropzone__filename {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
