@import '~@alife/theme-cnwms-operate/variables.scss';

@mixin op-input-size($padding, $height, $radius, $font-size) {
  padding: $padding;
  height: $height;
  border-radius: $radius;
  font-size: $font-size;
}

@mixin icon-size($size) {
  width: $size;
  height: $size;
  background-size: $size $size;
}

.op-scan-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 88px;

  .op-input {
    box-sizing: border-box;
    width: 100%;
    border: 2px solid $color-text1-1;
    color: $color-brand1-6;

    &::placeholder {
      color: $color-text1-1;
    }

    &.op-input-large {
      @include op-input-size(12px 24px, 72px, 10px, $font-size-display-2);
    }

    &.op-input-medium {
      @include op-input-size(10px 24px, 64px, 8px, $font-size-display-2);
    }

    &.op-input-small {
      @include op-input-size(10px 24px, 48px, 8px, $font-size-display-1);
    }
  }

  .op-scan {
    display: flex;
    align-items: center;
    width: 100%;

    .op-scan-title {
      margin-left: 12px;
    }

    .op-scan-icon {
      background-image: url('https://img.alicdn.com/imgextra/i2/O1CN01cblPme29HkGI9jfnl_!!6000000008043-2-tps-34-35.png');
    }

    &.op-scan-large {
      @include op-input-size(0, 72px, 10px, 48px);

      .op-scan-icon {
        @include icon-size($font-size-display-2);
      }
    }

    &.op-scan-medium {
      @include op-input-size(0, 64px, 8px, 48px);

      .op-scan-icon {
        @include icon-size($font-size-display-2);
      }
    }

    &.op-scan-small {
      @include op-input-size(0, 48px, 8px, 40px);

      .op-scan-icon {
        @include icon-size($font-size-display-1);
      }
    }
  }
}