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

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

    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    text-align: inherit;

    &[disabled] {
        cursor: not-allowed;
    }

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

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

    &::placeholder {
        color: $slate-gray-300;
    }

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

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

@mixin hc-textarea() {
    // Only allow resizing along the Y axis.
    resize: vertical;
    overflow: auto;
    // 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-clear-btn() {
    height: 16px;
    width: 20px;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 0;
    background-image: url($ico-clear-gray);
}


@mixin hc-clear-btn-show() {
    pointer-events: auto;
    cursor: pointer;
    opacity: 0.7;
    &:hover {
        opacity: 1;
    }
}