@import './colors';
@import './form-field';

@mixin hc-input() {
    font: inherit;
    background: inherit;
    color: currentColor;

    border: none;
    outline: none;
    padding: 0; // was 0.25rem 0
    margin: 0;
    width: 100%;
    max-width: 100%;
    text-align: inherit;
    font-size: 1.143rem; // 16px

    &[disabled] {
        cursor: not-allowed;
        color: $gray-10;
    }

    &:-moz-ui-invalid {
        box-shadow: none;
    }

    &::-ms-clear,
    &::-ms-reveal {
        display: none;
    }

    &::placeholder {
        color: $gray-30;
    }

    &:-ms-input-placeholder {
        color: $gray-30;
    }

    &::-ms-input-placeholder {
        color: $gray-30;
    }
}

@mixin hc-textarea() {
    // Only allow resizing along the Y axis.
    resize: vertical;
    overflow: auto;
    min-height: 25px;
    // The 2px padding prevents scrollbars from appearing on Chrome even when they aren't needed.
    // We also add a negative margin to negate the effect of the padding on the layout.
    padding: 2px 0;
    margin: -2px 0;
}

@mixin hc-char-count() {
    width: 100%;
    text-align: right;
}
    
@mixin hc-char-count-error {
    color: $wcf-red;
}