@use 'sass:map';
@use 'sass:color';

@use 'common/var.scss'as *;
@use 'mixins/mixins'as *;

#{getClassName((input, number))} {
  // font-size: #{getValName((input-number, font-size))};
  position: relative;

  &:hover {
    #{getClassName((input, number, warp))} {
      opacity: 1;
    }
  }

  // #{getClassName((input))} {
  //   @include set-css-val(input,
  //     ('border-radius': (border-radius-none)))
  // }
}

#{getClassName((input, number, warp))} {
  display: flex;
  flex-direction: column;
  width: 2em;
  margin-right: -.5em;
  opacity: 0;
  transition: .5s all;
  flex: 1;
  height: 100%;
  padding-top: 1px;
  padding-bottom: 1px;

  span {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1px;
    flex: 1;
    cursor: pointer;

    &:hover {
      color: #{getValName((color, primary))};
      background-color: #{getValName((color, neutral, 1))};
    }

    &#{getClassName((input, number, disabled))} {
      opacity: .3;
    }
  }

  i {
    // transform: perspective(400px) translateZ(-100px);
    // transform-origin: center;
    font-size: 0.846em;
    display: block;
  }
}

// #{getClassName((input, number))} {
//   @include set-css-val(input-number,
//     ('font-size': (heading8)))
// }

// #{getClassName((input, number, large))} {
//   @include set-css-val(input-number,
//     ('font-size': (heading7)));
// }

// #{getClassName((input, number, mini))} {
//   @include set-css-val(input-number,
//     ('font-size': (heading9)));
// }