:host {
  overflow: hidden;
  align-items: center;
  flex-direction: column;
  display: flex;
  position: relative;
}
.loading {
  margin-top: 120px;
}
.scanner-controls {
  width: 100%;
  height: 100%;
  position: absolute;
  background: white;
  top: 0;
  left: 0;
}
.action {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 20px;
}
.result {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scan-result {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-weight: 600;
  margin-bottom: 50px;
  font-size: 26px;
  overflow: visible;
}

.icon-placeholder {
  $buttonSize: 30px;
  border-radius: 60px;
  border: #e1ebf5 2px solid;
  background-color: white;
  width: $buttonSize;
  height: $buttonSize;
  display: block;
  padding: $buttonSize;
}

.errors {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.error {
  width: 70%;
  color: #f70300;
  font-weight: 600;
  text-align: center;
}
