:host {
  @apply flex flex-col relative;

  &.Removed {
    .header {
      @apply opacity-30 line-through;
    }
    .status {
      @apply opacity-30;
    }
  }
}

.header {
  @apply flex flex-row justify-center items-center mt-3;

  h1 {
    @apply text-xl font-bold text-center m-0 ml-4;
  }

  ui-icon {
    @apply ml-4 text-dark-goldenrod;
  }
}

.status {
  @apply flex flex-row justify-center items-center mt-px-10 mb-4;

  .indicator {
    @apply h-px-10 w-px-10 rounded-full bg-gray-50;
  }

  .status-text {
    @apply text-lg font-bold ml-2;
  }
}

.camera-preview {
  @apply flex flex-row justify-center;

  img {
    height: 200px;
  }
}

.actions {
  @apply text-center mb-5 mt-6 sticky bottom-1;

  .btn-cta {
    @apply bg-brand text-white font-bold text-lg outline-none border-none rounded-full px-6 py-3;
  }

  .btn-cta-secondary {
    @apply text-brand border-2 border-solid border-brand bg-white font-bold text-lg px-4 py-2 rounded-full mr-2;
  }

  #file-input {
    @apply hidden;
  }

  .btn-camera {
    @apply inline-block bg-brand text-white font-bold text-lg outline-none border-none rounded-full px-6 py-3 cursor-pointer;
  }

  .camera-hint {
    @apply text-inactive-branch mb-4;
  }

  button:disabled {
    @apply bg-inactive-branch;
  }
}
