@use 'pix-design-tokens/typography';

.import-page {
  > p {
    color: var(--pix-neutral-500);
    margin-bottom: 8px;
  }

  &__title {
    display: flex;
    align-items: center;
    gap: var(--pix-spacing-2x);

    > svg {
      width: 2rem;
      height: 2rem;
      fill: var(--pix-neutral-500);
    }

    > h2 {
      @extend %pix-title-s;
    }
  }

  &__section--download__instruction {
    color: var(--pix-neutral-500);
    font-size: 14px;

    ul {
      list-style: disc;
      margin-top: 6px;
      margin-left: 24px;
    }

    .pix-notification-alert--warning {
      margin-top: var(--pix-spacing-4x);
    }
  }

  &__section--download {
    display: flex;
    flex-direction: column;
    padding: var(--pix-spacing-6x);
    gap: var(--pix-spacing-6x);

    .pix-notification-alert__content {
      color: var(--pix-neutral-800);

      li:first-of-type {
        margin-bottom: 8px;

        img {
          margin-right: 8px;
          vertical-align: top;
        }
      }
    }

    &:first-of-type {
      min-height: 410px;
    }

    &:not(:first-of-type) {
      margin-top: var(--pix-spacing-8x);
    }
  }

  &__section--link-buttons {
    display: flex;
    gap: var(--pix-spacing-4x);
  }
}

.import-page-filename {
  &__cancel {
    margin-left: 8px;
  }
}

.import-page__section--confirm-button {
  width: fit-content;
}

.import-page-section {

  &__result-count-list {
    border-radius: 8px;
    background-color: var(--pix-neutral-20);
    color: var(--pix-neutral-500);
    padding: var(--pix-spacing-4x);
    display: flex;
    flex-direction: column;
    gap: var(--pix-spacing-2x);
  }

  &__result-count-item {
    display: flex;
    align-items: center;
    gap: var(--pix-spacing-2x);

    > svg {
      fill: var(--pix-neutral-500);
      width: 1.3rem;
      height: 1.3rem;
    }
  }

  &__information {
    color: var(--pix-neutral-800);
    font-weight: var(--pix-font-medium);
  }

  &__app-loader {
    margin: auto;

    img {
      width: 150px;
      height: 150px;
    }
  }
}

.file-import-section {

  &__filename {
    align-items: center;
    background-color: var(--pix-neutral-0);
    border: 1px solid var(--pix-neutral-100);
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(var(--pix-neutral-900), 8%);
    color: var(--pix-neutral-500);
    display: inline-flex;
    font-size: 1rem;
    margin-top: var(--pix-spacing-2x);
    padding: var(--pix-spacing-2x) var(--pix-spacing-1x) var(--pix-spacing-2x) var(--pix-spacing-4x);
  }

  &__button {
    margin: auto 0;

    label {
      min-width: 164px;
    }
  }
}

.import-download-block,
.file-import-block {
  &__icon {
    fill: var(--pix-neutral-500);
    height: 3rem;
    width: 7rem;
  }
}

.import-download-section {
  &__button {
    margin: auto 0;

    button {
      max-width: 164px;
    }
  }

  &__title {
    @extend %pix-title-xs;
  }
}

.file-import-block,
.import-download-block {
  align-items: center;
  background-color: var(--pix-neutral-20);
  border: 1px solid var(--pix-neutral-100);
  border-radius: 8px;
  color: var(--pix-neutral-800);
  display: flex;
  font-size: 0.875rem;
  padding: var(--pix-spacing-6x) var(--pix-spacing-4x);

  p {
    line-height: 21px;
    padding-top: var(--pix-spacing-1x);
  }

  span {
    font-size: 1rem;
    font-weight: 500;
  }

  & .import-download-section,
  & .file-import-section {
    display: flex;
    justify-content: space-between;
    width: 90%;
  }
}

.accordions-header {
  .pix-accordions-title__label {
    font-size: 1rem;
    font-weight: 400;
  }

  &__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

.accordions-header--blocking {
  .pix-accordions-title__icon {
    fill: var(--pix-error-700);
  }
}

.accordions-header--non-blocking {
  .pix-accordions-title__icon {
    fill: var(--pix-warning-500);
  }
}
