// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

@use '../mixins';
@use '../variables';

.InstallScreenBackupImportStep {
  position: relative;
  display: flex;

  width: 100vw;
  height: 100vh;

  flex-direction: column;
  align-items: center;
}

.InstallScreenBackupImportStep__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin-top: 84px;
  flex: 1;
}

.InstallScreenBackupImportStep__title {
  @include mixins.font-title-2;
  margin-block: 0 20px;
}

.InstallScreenBackupImportStep .ProgressBar {
  margin-block-end: 14px;
}

.InstallScreenBackupImportStep__progressbar-hint {
  @include mixins.font-caption;
  margin-block-end: 22px;

  @include mixins.light-theme {
    color: rgba(variables.$color-gray-60, 0.8);
  }

  @include mixins.dark-theme {
    color: variables.$color-gray-25;
  }
}

.InstallScreenBackupImportStep__description {
  @include mixins.font-body-1;

  @include mixins.light-theme {
    color: variables.$color-gray-60;
  }

  @include mixins.dark-theme {
    color: variables.$color-gray-25;
  }
}

.InstallScreenBackupImportStep__cancel {
  @include mixins.button-reset();
  & {
    @include mixins.button-focus-outline;
    @include mixins.font-body-1-bold;
  }

  @include mixins.light-theme() {
    color: variables.$color-ultramarine;
  }

  @include mixins.dark-theme() {
    color: variables.$color-ultramarine-light;
  }
}

.InstallScreenBackupImportStep__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 36px;
  min-height: 94px;
  gap: 26px;
}

.InstallScreenBackupImportStep__security {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 336px;

  &--icon::after {
    @include mixins.light-theme {
      @include mixins.color-svg(
        '../images/icons/v3/lock/lock.svg',
        rgba(variables.$color-gray-60, 0.8)
      );
    }

    @include mixins.dark-theme {
      @include mixins.color-svg(
        '../images/icons/v3/lock/lock.svg',
        variables.$color-gray-25
      );
    }

    & {
      content: '';
      display: block;
      height: 16px;
      width: 16px;
      margin-bottom: 4px;
    }
  }

  &--description {
    @include mixins.font-caption;
    text-align: center;

    @include mixins.light-theme {
      color: rgba(variables.$color-gray-60, 0.8);
    }

    @include mixins.dark-theme {
      color: variables.$color-gray-25;
    }

    a {
      text-decoration: none;
    }
  }
}