@use "../base/color" as cl;
@use "../base/font" as ft;
@use "../base/mixins/font_size-mx" as mx;

::placeholder {
  color: cl.$text-placeholder;
  opacity: 1;
  @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
}

::-webkit-input-placeholder {
  color: cl.$text-placeholder;
  @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
}

:-ms-input-placeholder {
  color: cl.$text-placeholder;
  @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
}

.qo-placeholder-xs::placeholder {
  @include mx.font-size(ft.$font-size-xs, ft.$line-height-xs);
}

.qo-placeholder-sm::placeholder {
  @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
}

.qo-placeholder-md::placeholder {
  @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
}

.qo-placeholder-italic::placeholder {
  font-style: italic;
}

.qo-placeholder-primary::placeholder { color: cl.$text-primary; }
.qo-placeholder-secondary::placeholder { color: cl.$text-secondary; }
.qo-placeholder-success::placeholder { color: cl.$text-success; }
.qo-placeholder-warning::placeholder { color: cl.$text-warning; }
.qo-placeholder-danger::placeholder { color: cl.$text-danger; }
.qo-placeholder-info::placeholder { color: cl.$text-info; }
.qo-placeholder-default::placeholder { color: cl.$text-default; }
.qo-placeholder-dark::placeholder { color: cl.$text-dark; }
.qo-placeholder-light::placeholder { color: cl.$text-light; }
.qo-placeholder-tertiary::placeholder { color: cl.$text-tertiary; }