$prefix: "hunt-numeric-input";

.#{$prefix} {
  .adui-input-right {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
  }

  &-buttons {
    width: 20px;
    height: 100%;
    border-radius: 0 4px 4px 0;
    box-shadow: -1px 0 0 var(--gray-400);

    &:hover {
      .#{$prefix}-button {
        height: 40%;
      }
    }

    .#{$prefix}-button {
      position: relative;
      height: 50%;
      overflow: hidden;
      cursor: pointer;
      transition: var(--motion-duration-fast) var(--ease-in-out) all;

      &:first-child {
        box-shadow: 0 1px 0 var(--gray-400);
      }

      &:hover {
        height: 60%;
        background-color: rgba(0, 0, 0, 0.02);
      }

      &:active {
        background-color: rgba(0, 0, 0, 0.06);
      }
    }

    svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
    }
  }

  &-disabled {
    .adui-input-right {
      cursor: not-allowed;
    }

    .#{$prefix} {
      &-buttons {
        pointer-events: none;
        box-shadow: -1px 0 0 rgba(0, 0, 0, 0.06);

        svg {
          fill: var(--gray-600);
        }
      }

      &-button {
        pointer-events: inherit;

        &:first-child {
          box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
        }
      }
    }
  }
}