/* disable text selection on the element */
@mixin noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Define font sizes that react to smaller screens */
@mixin responsive-font-size($base-size) {
    @media only screen and (min-width: 0) {
        font-size: $base-size - 2;
    }

    @media only screen and (min-width: $medium-screen) {
        font-size: $base-size - 1;
    }

    @media only screen and (min-width: $large-screen) {
        font-size: $base-size;
    }
}

/* Base style for form inputs */
@mixin input-base {
    box-sizing: border-box;
    margin-top: 20px;
    border: 2px solid $gtx-color-light-gray;
    border-radius: 3px;
    height: 2.5rem;
    padding: 5px;
    transition: border 0.2s;

    &:focus:not([readonly]) {
        border: 2px solid $gtx-color-primary;
        box-shadow: none;

        & + label {
            color: $gtx-color-primary;
        }
    }

    &[readonly] {
        color: lighten($gtx-color-dark-gray, 10%);
    }

    &[disabled] {
        background-color: $gtx-color-off-white;
        color: $gtx-color-mid-gray;
        border: 2px solid $gtx-color-light-gray;

        & + label {
            color: $gtx-color-dark-gray;
        }
    }
}

@mixin input-label-styles($selector: 'label') {
    & #{$selector} {
        position: absolute;
        top: 0;
        display: block;
        color: $gtx-color-dark-gray;
        transition: color 0.2s;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        user-select: none;
    }

    &.ng-touched.ng-invalid #{$selector} {
        color: $gtx-color-alert;
    }
}