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

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

.BackupMediaDownloadProgress {
  border-radius: 12px;
  display: flex;
  gap: 10px;
  padding: 11px;
  padding-inline-end: 16px;
  margin-inline: 10px;
  margin-block-end: 6px;
  margin-block-start: 2px;
  user-select: none;
  position: relative;

  &__title {
    @include mixins.font-body-2-bold;
  }

  @include mixins.light-theme {
    background-color: variables.$color-white;
    border: 1px solid variables.$color-gray-20;
  }
  @include mixins.dark-theme {
    background: variables.$color-gray-75;
    border: 1px solid variables.$color-gray-60;
  }
}

.BackupMediaDownloadProgress__icon {
  margin-top: 6px;
}

.BackupMediaDownloadProgress__icon--complete {
  &::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    @include mixins.light-theme {
      @include mixins.color-svg(
        '../images/icons/v3/check/check-circle.svg',
        variables.$color-ultramarine
      );
    }
    @include mixins.dark-theme {
      @include mixins.color-svg(
        '../images/icons/v3/check/check-circle.svg',
        variables.$color-ultramarine-light
      );
    }
  }
}

.BackupMediaDownloadProgress__icon--idle {
  &::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    @include mixins.light-theme {
      @include mixins.color-svg(
        '../images/icons/v3/backup/backup-bold.svg',
        variables.$color-ultramarine
      );
    }
    @include mixins.dark-theme {
      @include mixins.color-svg(
        '../images/icons/v3/backup/backup-bold.svg',
        variables.$color-ultramarine-light
      );
    }
  }
}
button.BackupMediaDownloadProgress__button {
  @include mixins.button-reset;
  & {
    @include mixins.font-subtitle-bold;
    @include mixins.light-theme {
      color: variables.$color-ultramarine;
    }
    @include mixins.dark-theme {
      color: variables.$color-ultramarine-light;
    }
  }
}

button.BackupMediaDownloadProgress__button-more {
  position: absolute;
  inset-inline-end: 14px;
  inset-block-start: 10px;
  @include mixins.button-reset;
  &::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    @include mixins.light-theme {
      @include mixins.color-svg(
        '../images/icons/v3/more/more.svg',
        variables.$color-gray-75
      );
    }
    @include mixins.dark-theme {
      @include mixins.color-svg(
        '../images/icons/v3/more/more.svg',
        variables.$color-gray-20
      );
    }
  }
}
button.BackupMediaDownloadProgress__button-close {
  position: absolute;
  inset-inline-end: 14px;
  inset-block-start: 10px;
  @include mixins.button-reset;
  &::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    @include mixins.light-theme {
      @include mixins.color-svg(
        '../images/icons/v3/x/x.svg',
        variables.$color-gray-45
      );
    }
    @include mixins.dark-theme {
      @include mixins.color-svg(
        '../images/icons/v3/x/x.svg',
        variables.$color-gray-20
      );
    }
  }
}

.BackupMediaDownloadProgress__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 36px;
}

.BackupMediaDownloadProgress__description {
  @include mixins.font-subtitle;

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

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

.BackupMediaDownloadCancelConfirmation {
  min-width: 440px;
}