@import '../../styles/define';
:root{
  --hor-keyboard-background: var(--van-gray-2);
  --hor-keyboard-key-background: var(--van-background-2);
  --hor-keyboard-text-color:  #323233;
  --hor-keyboard-border-color: #c3c3c3;
}
.van-theme-dark{
  --hor-keyboard-background: var(--van-gray-8);
  --hor-keyboard-key-background: var(--van-gray-7);
  --hor-keyboard-text-color:  rgba(255, 255, 255, .9);
}
.hor-keyboard {
  @extend %usn;
  &-header {
    @extend %df;
    @extend %aic;
    @extend %jcs;
    @extend %bw05;
    @extend %bwb;
    padding: j(10) j(10);
    background-color: var(--hor-keyboard-background);
  }
  &-value {
    @extend %df1;
    @extend %df;
    @extend %aic;
    @extend %c3;
    @extend %bsb;
    min-width: 70%;
    overflow: hidden;
    padding: 0 j(16);
    font-size: j(14);
    background-color: var(--hor-keyboard-key-background);
    color: var(--hor-keyboard-text-color);
    border-radius: j(8);
    height: j(40);
    margin-right: j(8);
    border: 1px solid var(--hor-keyboard-border-color);
    &.place-value {
      color: #cbcbcb;
    }
  }
  &-content {
    padding: 0 j(10) j(40);
    background-color: var(--hor-keyboard-background);
  }
  &-li {
    @extend %df;
    @extend %aic;
    @extend %df1;
    margin-bottom: j(10);
    margin-right: j(-5);
    &:last-child {
      margin-bottom: 0;
    }
  }
  &-cell {
    // @extend %df1;
    @extend %df;
    @extend %aic;
    @extend %jcc;
    @extend %c3;
    @extend %cp;
    @extend %w100;
    @extend %df1;
    margin-right: j(4);
    font-size: j(14);
    background-color: var(--hor-keyboard-key-background);
    color: var(--hor-keyboard-text-color);
    height: j(34);
    border-radius: j(4);
    border: 1px solid #c3c3c3;
    &:active {
      opacity: 0.4;
    }
  }
  &-collapse {
    font-size: j(28);
  }
  .key-DELETE {
    flex: 1.5;
    color: var(--hor-keyboard-text-color);
    background: var(--hor-keyboard-key-background)
      url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAlFJREFUSEvt1k+oDVEcB/Dvb2IpCzYsrKxf7vlNerqp21uj/HsrYoek1KNYUNgQKaVbbGy8hUIIK+pm8+ie39ykbNhYoKxeVjdpjo7O6Nx5Z87M0+Vu3mzPn8/8fud3fjOECT00IRcr8H/LfG2qmfkcgItjfqNuFGbmOQDXALwH8G1MeAdArxJm5mMAugA+AtgjIu8szMwbRORr05dotVrbBoPBQjGfmU0lrJQ6TER3AHwyxuzNskwKFMBTAK9F5HgdnqbpVmPMGwBnROSK2yMMK6VmiegegC95nu/z37bdbq8ZDoffHdiN4R4KIjqhtb5ZCSuldhDRQwCLDn1VjqoJXoUGYaXUjENNkiT7+/3+i6pUOvwZgO22DvzIHWrH1vuRBs9YKTVNRA8ArCWiWa3187rzC+F16EjESqkph25y6OM6tBgv4fcB2KsSjHRJxMxsq/eQQ+3iZT0Ot7WwxS4Mpdff8M91YuarAE4R0V2t9cFlqQBceu3RrGtS7SP3OE3TJ8aYnUR0W2t9pCnun2mSJKfzPN8VKrhgxF7uXwKYAXBDRE7W4aFCilV7tHMxs21t0wAui8jZKjx2T+vwypbJzG8BTAE4LyKXyngMraj2kXse7dXM/AHAZgBzInK92LAJWsKL9goR+f1BisJuwmcAG4noqNb6lndG80S0UPTeWC147XW3iDxqBLtJi7abGWMOZFk2X1dwofFOp7Oq1+v9jBZXaCEz/wCw2n5D/wYOrIn/CJTunrbHMyYYxpgLtf9c48LK+6zA/yqzS/adWKp/AcS5YqLVfkUYAAAAAElFTkSuQmCC')
      center no-repeat;
    background-size: 44%;
  }
  .key-SURE {
    flex: 2.3;
    background-color: #0095d9;
    color: #fff;
  }
  .disabled {
    @extend %cfff;
    background-color: #bbb;
    &:active {
      opacity: 1;
    }
  }
  &-number {
    @extend %df;
    padding: 0 j(10) j(40);
    .hor-keyboard-li {
      flex-direction: column;
      margin-right: j(6);
      margin-bottom: 0;
      height: j(200);
      &:last-child {
        margin-right: j(-6);
      }
      .key-DELETE {
        @extend %df1;

        background-size: 28%;
      }
      .key-SURE {
        @extend %df1;
      }
    }
    .hor-keyboard-cell {
      border-radius: j(8);
      margin-bottom: j(6);
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  .hor-keyboard-paste {
    width: j(50);
    margin-right: j(6);
  }
  .hor-keyboard-copy {
    width: j(50);
  }
}