@use '@/assets/scss/unnnic' as *;

@mixin input-base {
  background: $unnnic-color-bg-base;
  border: 1px solid $unnnic-color-border-base;
  outline: none;
  border-radius: $unnnic-radius-2;
  color: $unnnic-color-fg-emphasized;
  caret-color: $unnnic-color-fg-muted;
  font: $unnnic-font-body;

  transition: border-color 0.1s ease-in-out;

  &:focus:not(.use-focus-prop),
  &.focus {
    border-color: $unnnic-color-border-accent-strong;
  }

  &::placeholder {
    color: $unnnic-color-fg-muted;
    opacity: 1;
    /* Firefox */
  }

  &:disabled {
    border-color: $unnnic-color-border-muted;
    background-color: $unnnic-color-bg-muted;
    cursor: not-allowed;
    color: $unnnic-color-fg-muted;
  }
}

@mixin input-sm-font {
  font: $unnnic-font-body;
}

@mixin input-md-font {
  font: $unnnic-font-body;
}

@mixin input-error {
  border-color: $unnnic-color-border-critical;
}