/** The next styles are meant to easily customize the background and border of radiobuttons and checkboxes, not their size! */

@mixin disabled-radiocheck-style {
    border-color: lighten($radiocheck-unchecked-color, 5%);
}

@mixin checkbox-unchecked-style {
    border-color: $radiocheck-unchecked-color;
}

@mixin checkbox-checked-style($color-fill: $radiocheck-checked-color, $color-stroke: $radiocheck-checked-color) {
    border-color: $color-fill;
    background-image: svg-as-url("<svg xmlns='http://www.w3.org/2000/svg' stroke='#{$color-stroke}' fill='#{$color-fill}' width='32' height='32' viewBox='0 0 32 32'><path d='M25.1 12.5l-3.4-3.3-8 8-2.9-3-3.4 3.4 6.3 6.3z'/></svg>");
    background-size: 20px 20px;
    background-position: -3px;
}

@mixin radio-unchecked-style {
    border-color: $radiocheck-unchecked-color;
}

@mixin radio-checked-style($color: $radiocheck-checked-color) {
    border-color: $color;
    background-image: radial-gradient(4px, $color 0%, $color 99%, transparent 100%);
}

/** end radiobuttons and checkboxes */

@mixin placeholder($color: $input-color-placeholder) {
    &::-moz-placeholder {
        color: $color;

        // Firefox
        opacity: 1;
    }

    // See https://github.com/twbs/bootstrap/pull/11526
    &:-ms-input-placeholder {
        color: $color;
    }

    // Internet Explorer 10+
    &::-webkit-input-placeholder {
        color: $color;
    }

    // Safari and Chrome
}

@mixin focus-shadow-border {
    border-color: $input-border-focus;
    outline: 0;

    @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px $input-border-focus-shadow);
}

@mixin focus-shadow {
    outline: 0;

    @include box-shadow(0 0 0 1px $input-border-focus, 0 0 8px $input-border-focus-shadow);
}

@mixin form-control-focus {
    &:focus {
        @include focus-shadow-border;
    }
}

@mixin radiocheck-focus {
    &:focus {
        @include focus-shadow;
    }
}

@mixin form-control {
    display: block;

    //width: 100%;
    height: $input-height;

    // Make inputs at least the height of their button counterpart (base line-height + padding + border)
    padding: $padding-base-vertical $padding-base-horizontal;

    @include font-normal;

    font-size: $font-size-base;
    line-height: $line-height-base;
    color: $input-color;
    background-color: $input-bg;
    background-image: none;

    // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
    border: 1px solid $input-border;
    border-radius: $input-border-radius;

    @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));

    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;

    // Customize the `:focus` state to imitate native WebKit styles.
    @include form-control-focus;

    // Placeholder
    @include placeholder;

    // Disabled and read-only inputs
    //
    // HTML5 says that controls under a fieldset > legend:first-child won't be
    // disabled if the fieldset is disabled. Due to implementation difficulty, we
    // don't honor that edge case; we style them as disabled anyway
    &[disabled],
    &[readonly],
    fieldset[disabled] & {
        cursor: not-allowed;
        background-color: $input-bg-disabled;
        opacity: 1;
        width: 100%;

        // iOS fix for unreadable disabled content

    }
}