@import url('../CloudTheme.css');

.inputWrapper {
  display: flex;

  input {
    text-align: center;
  }

  fieldset:global(.MuiOutlinedInput-notchedOutline),
  div.inputRoot {
    border-radius: 0;
  }

  .inputPrefix {
    button:global(.MuiIconButton-root) {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .inputSuffix {
    button:global(.MuiIconButton-root) {
      border-left: none;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}

.inputVerticalWrapper {
  display: flex;

  input {
    text-align: center;
    padding-right: 26px;
  }

  .stepperWrapper {
    margin-left: -23px;
    margin-top: 1px;
    height: 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    box-sizing: border-box;

    &.small {
      margin-left: -20px;
      height: 26px;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;

      button {
        &:first-child {
          padding: 2px 4px 1px 5px;
          border-top-right-radius: 5px;
        }

        &:last-child {
          padding: 1px 4px 2px 5px;
          border-bottom-right-radius: 5px;
        }
      }
    }

    button {
      border-radius: 0;
      background-color: $black-black4;

      &:hover:not(:disabled) {
        background-color: $stroke-stroke1 !important;
        color: $black-black1;
      }

      &:first-child {
        padding: 4px 6px 3px;
        border-top-right-radius: 7px;
      }

      &:last-child {
        padding: 3px 6px 4px;
        border-bottom-right-radius: 7px;
      }

      svg {
        width: 10px;
        height: 10px;
      }
    }
  }
}