@import '@/sass/style.scss';

.QrcodeScanner {
  @include margin-bottom-not-last-child(16px);
  height: 224px;
  margin: 0 auto;
  padding: 8px;
  position: relative;
  width: 224px;

  .camera-target {
    height: inherit;
    left: 0;
    position: absolute;
    top: 0;
    width: inherit;

    &::before,
    &::after {
      background-color: $soft-red;
      content: '';
      display: block;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    &::before {
      height: 208px;
      width: 1px;
    }

    &::after {
      height: 1px;
      width: 208px;
    }

    .target-corner--top-left,
    .target-corner--top-right,
    .target-corner--bottom-right,
    .target-corner--bottom-left {
      border: solid 1px $very-soft-green;
      height: 16px;
      position: absolute;
      width: 16px;
    }
  
    .target-corner--top-left,
    .target-corner--top-right {
      border-bottom: none;
      top: 0;
    }
  
    .target-corner--bottom-right,
    .target-corner--bottom-left {
      border-top: none;
      bottom: 0;
    }
  
    .target-corner--top-left,
    .target-corner--bottom-left {
      border-right: none;
      left: 0;
    }
  
    .target-corner--top-right,
    .target-corner--bottom-right {
      border-left: none;
      right: 0;
    }
  }
}
