@import "../../../styles/_common.scss";
@import "../../../styles/_default-ui.scss";

#input-box-container {
  width: 480px;
  height: 220px;
  text-align: center;
  opacity: 0;
  //   box-shadow: 2px 2px black;

  @include UIPanel;

  // No arrow for input with number type
  input[type="number"] {
    -moz-appearance: textfield;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  .box-title {
    @include TextStrokeNormal;
    @include H2;
    padding: 22px;
  }

  .input-box {
    position: absolute;
    width: 60%;
    height: 30px;
    left: 50%;
    top: 45%;
    text-align: center;
    font-weight: 200;
    font-size: 22px;
    border: 2px solid cadetblue;
    transform: translate(-50%, -50%);

    @include H4;
  }

  .button-container {
    position: fixed;
    top: 70%;
    left: 50%;
    transform: translate(-50%, 0);

    width: 60%;
    text-align: center;
    // display: inline-flex;

    $BUTTON_HEIGHT: 32px;
    .button {
      @include TextStrokeNormal;
      @include H4;
      @include UIButton;

      position: absolute;

      width: auto;
      padding-left: 12px;
      padding-right: 12px;
      height: $BUTTON_HEIGHT;

      text-align: center;
      line-height: $BUTTON_HEIGHT;


      span {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
      }
    }

    .float-left {
      left: 0%;
    }

    .float-right {
      right: 0%;
    }

    .center {
      position: absolute;
      left: 50%;
      width: 100%;
      padding: 0;
      transform: translate(-50%, 0);
    }

    .ok-button {
    }

    .cancel-button {
    }
  }
}
