@import '@materials/questions/common/css/default.scss';

.input-wrapper {
  font-size: 0;

  .input-box {
    outline: none;
    font-size: 0.56rem;
    padding: 0.4rem;
    border-radius: 0.08rem;
    background-color: #fff;
    vertical-align: top;

    border: 1px solid $border-color;
    width: 200%;
    height: 1.61rem;

    transform: scale(0.5, 0.5);
    transform-origin: left top;
    box-sizing: border-box;
    margin-bottom: -0.81rem;
    overflow: hidden;
    color: $font-color;
    z-index: 10;

    &.is-focused:focus {
      border: 1px solid $primary-color;
      height: 3.5rem;
      margin-bottom: -1.75rem;
      overflow-y: scroll;
    }

    &:not([readonly]):hover {
      border: 1px solid $primary-color;
    }

    &.print {
      border: none;
      border-bottom: 1px solid $border-color;
      border-radius: 0;
    }

    &::-webkit-input-placeholder {
      /* WebKit browsers */
      font-size: 0.56rem;
      font-weight: 300;
      color: $placeholder-color;
    }

    &:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      font-size: 0.56rem;
      font-weight: 300;
      color: $placeholder-color;
    }

    &::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      font-size: 0.56rem;
      font-weight: 300;
      color: $placeholder-color;
    }

    &:-ms-input-placeholder {
      /* Internet Explorer 10+ */
      font-size: 0.56rem;
      font-weight: 300;
      color: $placeholder-color;
    }
  }
}
