/* Components :: NumberInput :: Styles */

@import '../../styles/settings/index';
@import '../../styles/tools/index';
@import '../Form/Form.scss';

.c-number {
  @include flex($direction: column);

  position: relative;

  &__controls {
    @include absolute(top 50% right $fabric-global-spacing-unit-small);
    @include flex(
      $direction: column,
      $justify-content: center,
      $align-items: center
    );

    transform: translateY(-50%);
    z-index: 1;
  }

  &__control-btn {
    @include fabric-font-size(16px);
    @include flex($align-items: center, $justify-content: center);

    background: transparent;
    border: 0;
    color: fabric-color('grey');
    cursor: pointer;
    padding: 0;

    .u-disabled & {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }
}

.c-number-input {
  @include fabric-font-size(16px);

  appearance: textfield;
  border: 1px solid fabric-color('light-grey');
  color: fabric-color('grey');
  font-family: 'FS-Emeric-Regular', sans-serif;
  padding: $fabric-global-spacing-unit-small;
  transition: $fabric-global-transition;

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &[data-invalid] {
    border: 1px solid fabric-color('negative');
    color: fabric-color('negative');
  }

  &::placeholder {
    color: fabric-color('grey');
    opacity: 0.4;
  }

  &::-webkit-inner-spin-button {
    appearance: none;
  }
}