@use "sass:math";

@import './colors';
@import './functions';
@import './variables';

$line-height: 1.5;
$label-font-scale: 1;
$error-font-scale: 0.75;
$infix-margin-top: 1.143em * $line-height * $label-font-scale;
$infix-margin-top-tight: 1.143em * $line-height * 0.93;
$prefix-suffix-icon-font-size: 125%;
$prefix-suffix-icon-line-height: $line-height * 0.87;

$infix-padding: 0.393em;
$infix-padding-tight: $infix-padding * 0.5;
$error-margin-top: math.div(0.4em, $error-font-scale);
$wrapper-padding-bottom: ($error-margin-top + $line-height) * $error-font-scale;

@mixin hc-form-field() {
    position: relative;
    text-align: left;
    font-size: inherit;
    font-family: $default-font-family;
    font-weight: 400;
    line-height: $line-height;
    flex-direction: inherit;
}

@mixin hc-form-field-wrapper() {
    position: relative;
    padding-bottom: $wrapper-padding-bottom;
    flex-direction: inherit;
}

@mixin hc-form-field-wrapper-tight() {
    padding-bottom: 10px;
}

@mixin hc-form-field-wrapper-inline() {
    display: inline-flex;
    width: 100%;
    padding-bottom: inherit;
}

@mixin hc-form-field-content-wrapper() {
    display: flex;
    flex-direction: inherit;
    flex-wrap: wrap;
    width: 100%;
}

@mixin hc-form-field-flex() {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid $slate-gray-300;

    background: $white;
}

@mixin hc-form-field-flex-hover() {
    border: 1px solid $primary-brand;
    background-color: tint($blue, 95%);
}

@mixin hc-form-field-flex-focus() {
    border: 1px solid $primary-brand;
    background-color: $white;
    box-shadow: 0 0 3px $primary-brand;
    outline: none;
}

@mixin hc-form-field-flex-inline() {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    border: 1px solid $slate-gray-300;

    background: $white;
}

@mixin hc-form-field-disabled-flex() {
    cursor: not-allowed;
    border: 1px solid $gray-200;
    background-color: $slate-gray-100;
    color: tint($text, 60%);
}

@mixin hc-form-field-input-invalid() {
    border: 1px solid $error;
}

@mixin hc-form-field-input-invalid-focus() {
    box-shadow: 0 0 3px $error;
}

@mixin hc-form-field-non-input() {
    display: inline-flex;
    flex-direction: inherit;
    width: 100%;
}

@mixin hc-form-field-non-input-inline() {
    display: inline-flex;
    flex: 0 0 100%;
    min-height: 35px;
    align-items: center;
}

@mixin hc-form-field-non-input-inline-tight() {
    min-height: auto;
}

@mixin hc-form-field-prefix-suffix() {
    white-space: nowrap;
    flex: none;
    position: relative;
}

@mixin hc-form-field-prefix-suffix-disabled {
    opacity: 0.5;
}

@mixin hc-form-field-prefix-suffix-icon() {
    color: $gray-400;
    font-size: $prefix-suffix-icon-font-size;
    line-height: $prefix-suffix-icon-line-height;
}

@mixin hc-form-field-suffix-pad() {
    margin-left: 7px;
}

@mixin hc-form-field-prefix-pad() {
    margin-right: 7px;
}

@mixin hc-form-field-prefix-suffix-tight() {
    line-height: 1.3;
}

@mixin hc-form-field-prefix {
    padding-left: 7px;
    display: flex;
    align-items: center;
}

@mixin hc-form-field-suffix {
    padding-right: 7px;
    display: flex;
    align-items: center;
}

@mixin hc-form-field-infix() {
    display: block;
    position: relative;
    flex: auto;
    padding: $infix-padding 10px;
}

@mixin hc-form-field-infix-mobile() {
    font-size: calculateRem(16px);
}

@mixin hc-form-field-infix-tight() {
    padding: $infix-padding-tight 7px;
    font-size: calculateRem(13px);
}

@mixin hc-form-field-label-wrapper() {
    box-sizing: content-box;
    width: 100%;
}

@mixin hc-form-field-label-wrapper-inline() {
    flex: 1 0 auto;
    padding: 7px 15px 0 0;
}

@mixin hc-form-field-label-wrapper-tight-inline() {
    padding-top: 0;
    line-height: 1.9;
}

@mixin hc-form-field-label-wrapper-icon() {
    width: 1em;
    height: 1em;
    font-size: inherit;
    vertical-align: baseline;
}

@mixin hc-form-field-label() {
    display: block;
    width: 100%;
    margin-bottom: 3px;
    font: inherit;
    font-size: calculateRem(14px);
    color: inherit;
}

@mixin hc-form-field-label-extension() {
    color: $gray-500;
    font-size: calculateRem(12px);
    margin-bottom: 10px;
}

@mixin hc-form-field-label-inline() {
    width: 100%;
    font: inherit;
    font-size: calculateRem(14px);
    color: inherit;
}

@mixin hc-form-field-label-tight() {
    font-size: calculateRem(13px);
}

@mixin hc-form-field-error-wrapper() {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    margin-top: $error-margin-top;
    font-size: $error-font-scale * 100%;
}

@mixin hc-error() {
    display: block;
    color: $error;
}

@mixin hc-required-marker() {
    color: $error;
}