/** 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;

        // iOS fix for unreadable disabled content
    }
}