@import '../sass/colors';
@import '../sass/functions';
@import '../sass/mixins';

$line-height: 1.5;
$label-font-scale: 1;
$border-thickness: 2px;
$error-font-scale: 0.75;
$infix-margin-top: 1.143em * $line-height * $label-font-scale;
$prefix-suffix-icon-font-size: 125%;
$field-height: 2.8571rem;

$infix-padding-top: 0.6428571em; // 9px
$infix-padding-bottom: 0.5714285em; // 8px
$error-margin-top: 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: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    line-height: $line-height;
    flex-direction: inherit;
}

@mixin hc-form-field-wrapper() {
    position: relative;
    border-top: $infix-margin-top solid transparent;
    padding-bottom: $wrapper-padding-bottom;
    flex-direction: inherit;
}

@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: baseline;
    box-sizing: border-box;
    width: 100%;

    padding: 0 7px 0 0;
    border: $border-thickness solid $gray-50;
    border-radius: 1px;

    background: $white;
}

@mixin hc-form-field-flex-inline() {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;

    padding: 0 7px 0 0;
    border: $border-thickness solid $gray-50;
    border-radius: 1px;

    background: $white;
    width: 100%;
}

@mixin hc-form-field-input-focused() {
    @include formFieldFocusedState();
}

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

@mixin hc-form-field-input-invalid() {
    border: $border-thickness solid $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-prefix-suffix() {
    white-space: nowrap;
    flex: none;
    position: relative;
    top: .1em;
}

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

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

@mixin hc-form-field-prefix {
    padding-left: 7px;
}

@mixin hc-form-field-suffix {
    padding-right: 7px;
}

@mixin hc-form-field-infix() {
    display: block;
    position: relative;
    flex: auto;
    line-height: 1.3571428em; //19px
    padding: $infix-padding-top 10px $infix-padding-bottom;
}

@mixin hc-form-field-label-wrapper() {
    position: absolute;
    left: 0;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    pointer-events: none; // We shouldn't catch mouse events (let them through).
    top: -$infix-margin-top;
    padding-top: $infix-margin-top;
}

@mixin hc-form-field-label-wrapper-inline() {
    padding: 10px 15px 0 0;
}

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

@mixin hc-form-field-no-label() {
    border-top: none;
}

@mixin hc-form-field-label() {
    position: absolute;
    left: 0;

    font: inherit;
    font-size: calculateRem(16px);
    color: $gray-50;
    pointer-events: none; // We shouldn't catch mouse events (let them through).

    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;

    top: $infix-margin-top + $infix-padding-top;
    transform: translateY(-$infix-margin-top - $infix-padding-top) scale($label-font-scale);
    display: block;
    transform-origin: 0 0;
}

@mixin hc-form-field-label-inline() {
    font: inherit;
    font-size: calculateRem(16px);
    color: $gray-500;
    pointer-events: none; // We shouldn't catch mouse events (let them through).

    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@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-hint() {
    display: block;
    color: $gray-50;
    font-size: 11px;
    margin-top: 5px;
}

@mixin hc-required-marker() {
    color: $error;
    margin-left: -12px;
    margin-right: 5px;
}