@import '../../Theme/constants';

.instructions {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.instructions > span {
  color: $color-white;
  font-family: var(--osdk-font-family-body);
  font-size: var(--font-size-base);
  margin-bottom: 8 * $unit;

  @media (--short-viewport) {
    font-size: var(--font-size-x-small);
    margin-bottom: 0;
  }
}

.instructions > .title {
  font-size: 20 * $unit;
  font-weight: 600;

  @media (--short-viewport) {
    font-size: var(--font-size-large);
  }
}

.instructions > .subtitle {
  font-weight: normal;
}

.instructions .success {
  background-image: url('./assets/success.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 48 * $unit;
}

.instructions .ariaLabel {
  opacity: 0;
}

.instructions .loading {
  align-self: center;
  border-radius: 4 * $unit;
  display: flex;
  height: 4 * $unit;
  margin-top: 16 * $unit;
  overflow: hidden;
  width: 50%;

  > span {
    border-radius: 4 * $unit;
    animation-duration: 1000ms;
  }

  > .active {
    width: 0%;
    background-color: $color-white;
    animation: captureProgress forwards linear;
  }

  > .background {
    width: 100%;
    background-color: var(--color-background-button-custom);
    opacity: 0.15;
    animation: captureProgress forwards linear reverse;
  }
}

@keyframes captureProgress {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}