/// <reference path="../../_color-definitions.scss" />
/// <reference path="../../_variables.scss" />
/// <reference path="../../_mixins.scss" />

.tk-number-field {
  @include component-spacing();

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

// Validation error state


// Element label
.tk-number-field__label {
  margin-bottom: 2px;
}

// Element control
.tk-number-field__native {
  @include create-text-field;

  &.is-focused {
    text-align: left;
  }

  &::placeholder {
    text-align: left;
  }

  &.dense {
    height: 28px;
    font-size: 0.85rem;
  }
}

// Element validation text
.tk-number-field__validation-state {
  margin-top: 5px;
  font-family: var(--base-font-family, $base-font-family);
  font-size: 0.75rem;
}
