@import 'node_modules/bootstrap/scss/functions';
@import 'node_modules/bootstrap/scss/mixins';
@import 'node_modules/bootstrap/scss/variables';

$custom-control-color: $input-color !default;

$custom-control-bg: $input-bg !default;

$custom-control-font-size-base: 1em !default;
$custom-control-font-size-lg: $custom-control-font-size-base * 1.25 !default;
$custom-control-font-size-sm: $custom-control-font-size-base * .875 !default;

$custom-control-box-shadow: $input-box-shadow !default;

$custom-control-disabled-bg: $input-disabled-bg !default;

$custom-control-padding-y: .5em !default;
$custom-control-padding-x: .75em !default;
$custom-control-line-height: 1em !default;

$custom-control-padding-y-sm: .5em !default;
$custom-control-padding-x-sm: .75em !default;
$custom-control-line-height-sm: 1em !default;

$custom-control-padding-y-lg: .5em !default;
$custom-control-padding-x-lg: .75em !default;
$custom-control-line-height-lg: 1em !default;

$custom-control-border-width: $input-border-width;
$custom-control-border-color: $input-border-color;

$custom-control-border-radius: $input-border-radius;
$custom-control-border-radius-lg: $input-border-radius-lg !default;
$custom-control-border-radius-sm: $input-border-radius-sm !default;

$custom-control-height-border: $input-border-width * 2 !default;

$custom-control-height-inner: ($custom-control-font-size-base + ($custom-control-line-height / 2) + ($custom-control-padding-y * 2)) !default;
$custom-control-height: calc(#{$custom-control-height-inner} + #{$custom-control-height-border}) !default;

$custom-control-height-inner-sm: ($custom-control-font-size-sm + ($custom-control-line-height-sm / 2) + ($custom-control-padding-y-sm * 2)) !default;
$custom-control-height-sm: calc(#{$custom-control-height-inner-sm} + #{$custom-control-height-border}) !default;

$custom-control-height-inner-lg: ($custom-control-font-size-lg + ($custom-control-line-height-lg / 2) + ($custom-control-padding-y-lg * 2)) !default;
$custom-control-height-lg: calc(#{$custom-control-height-inner-lg} + #{$custom-control-height-border}) !default;

$custom-control-label-font-size: $custom-control-font-size-base;
$custom-control-label-font-size-sm: $custom-control-font-size-sm;
$custom-control-label-font-size-lg: $custom-control-font-size-lg;

$custom-control-shrink-font-size-base: $custom-control-label-font-size * .9;
$custom-control-shrink-font-size-sm: $custom-control-label-font-size-sm * .8;
$custom-control-shrink-font-size-lg: $custom-control-label-font-size-lg * .85;

$custom-control-placeholder-color: $input-placeholder-color;

$custom-control-transition: $input-transition, padding .15s ease-out;

@function parseInt($n) {
    @return $n / ($n * 0 + 1); /* 2 */
}

@function px($value, $font-size: 16) {
    $font-size: $font-size + 0px;
    $convertedSize: parseInt($value) * parseInt($font-size);
    @return #{$convertedSize}px;
}

.custom-select-field,
.custom-input-field,
.custom-textarea-field {
    
    label {
        margin: 0;
        font-weight: normal;
        color: $input-placeholder-color;
    }


    &.is-invalid {
        &.custom-input-field .custom-control,
        &.custom-textarea-field .custom-control,
        &.custom-select-field .form-group-inner {
            border-color: $danger;
        }

        &.has-focus.custom-input-field .custom-control,
        &.has-focus.custom-textarea-field .custom-control,
        &.has-focus.custom-select-field .form-group-inner {
            border-color: $danger;
            box-shadow: 0 0 0 $input-focus-width rgba($danger, .25);
        }

        label {
            color: $danger;
        }

        .invalid-feedback  {
            display: block;
        }
    }

    &.is-valid {
        &.custom-input-field .custom-control,
        &.custom-select-field .form-group-inner {
            border-color: $success;
        }

        &.has-focus.custom-input-field .custom-control,
        &.has-focus.custom-select-field .form-group-inner {
            border-color: $success;
            box-shadow: 0 0 0 $input-focus-width rgba($success, .25);
        }

        &:not(.is-empty) > label {
            color: $success;
        }

        .invalid-feedback  {
            display: block;
        }
    }
}

.custom-select-field .form-group-inner,
.custom-input-field .custom-control {
    height: $custom-control-height;
}

.custom-textarea-field .custom-control {
    min-height: $custom-control-height;
}

.custom-select-field .form-group-inner,
.custom-input-field .custom-control,
.custom-textarea-field .custom-control {
    display: block;
    width: 100%;
    transition: padding .15s ease-out;
    padding: $custom-control-padding-y $custom-control-padding-x;
    font-size: $custom-control-font-size-base;
    line-height: $custom-control-line-height;
    color: $custom-control-color;
    background-color: $custom-control-bg;
    background-clip: padding-box;
    border: $custom-control-border-width solid $custom-control-border-color;

    // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
    @if $enable-rounded {
        // Manually use the if/else instead of the mixin to account for iOS override
        border-radius: $custom-control-border-radius;
    } @else {
        // Otherwise undo the iOS default
        border-radius: 0;
    }

    @include box-shadow($custom-control-box-shadow);
    @include transition($custom-control-transition);

    // Unstyle the caret on `<select>`s in IE10+.
    &::-ms-expand {
        background-color: transparent;
        border: 0;
    }

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

    // Placeholder
    &::placeholder {
        transition: opacity .15s ease-out;
        // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
        opacity: 1;
    }

    &.is-invalid::placeholder {
        color: $danger;
    }

    // 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] {
        background-color: $custom-control-disabled-bg;
        // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
        opacity: 1;
    }
}

// Custom Select

.custom-select-field {

    & > label {
        left: 0;
        margin: 0;
        z-index: 1;
        position: absolute;
        line-height: $custom-control-height;
        font-size: $custom-control-font-size-base;
        transition: all .15s ease-out;
        padding: 0 $custom-control-padding-x 0;
    }
    
    &.is-empty > label {
        line-height: calc(#{px($custom-control-height-inner)} + #{$custom-control-height-border});
    }
    
    .form-group-inner {
        &::after {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 0;
            content: '';
            width: 2.3em;
            height: 66.6666%;
            transform: translateY(25%);
            border-left: $custom-control-border-color 1px solid;
            background-size: .666em .666em;
            background-position: center center;
            background-repeat: no-repeat;
            background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAxNi42IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMCAxNi42Ij48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzZjNzU3ZCIgZD0iTTMwIDBMMTUgMTYuNiAwIDBoMzB6Ii8+PC9zdmc+);
        }
    }

    &.is-invalid .form-group-inner::after {
        border-color: $danger;
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAxNi42IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMCAxNi42Ij48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI2RjMzU0NSIgZD0iTTMwIDBMMTUgMTYuNiAwIDBoMzB6Ii8+PC9zdmc+);
    }

    &.is-valid .form-group-inner::after {
        border-color: $success;
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAxNi42IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMCAxNi42Ij48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzI4YTc0NSIgZD0iTTMwIDBMMTUgMTYuNiAwIDBoMzB6Ii8+PC9zdmc+);
    }

    &.is-invalid .custom-select {
        background: none;
    }

    &.has-focus .form-group-inner {
        color: $input-focus-color;
        background-color: $input-focus-bg;
        border-color: $input-focus-border-color;
        outline: none;
        // Avoid using mixin so we can pass custom focus shadow properly
        @if $enable-shadows {
            box-shadow: $input-box-shadow, $input-focus-box-shadow;
        } @else {
            box-shadow: $input-focus-box-shadow;
        }
    }

    &:not(.is-empty),
    &.has-changed,
    &.has-changed.is-empty {
        &:not(.has-focus) {
            z-index: 0;
        }

        & > label {
            top: 0;
            opacity: 1;
            z-index: 2;
            transform: none;
            line-height: 1em;
            font-size: $custom-control-shrink-font-size-base;
            padding: $custom-control-padding-y * .75 $custom-control-padding-x + ($custom-control-label-font-size - $custom-control-shrink-font-size-base / 1.05) 0;
        }

        .custom-select {
            padding-top: $custom-control-font-size-base;
        }
    }

    // Form control sizing
    //
    // Build on `.form-control` with modifier classes to decrease or increase the
    // height and font-size of form controls
    &.custom-select-field-sm {
        & > label {
            font-size: $custom-control-font-size-sm;
            padding-left: $custom-control-padding-x-sm;
        }
        
        &:not(.is-empty),
        &.has-changed,
        &.has-changed.is-empty {
            & > label {
                font-size: $custom-control-shrink-font-size-sm;
                padding: $custom-control-padding-y-sm $custom-control-padding-x-sm + ($custom-control-label-font-size-sm - $custom-control-shrink-font-size-sm / 1.15) 0;
            }

            .custom-select {
                padding-top: #{$custom-control-font-size-base + $custom-control-font-size-base - $custom-control-font-size-sm};
            }
        }

        &.is-empty > label,
        &.has-changed.is-empty > label {
            line-height: calc(#{px($custom-control-height-inner-sm)} + #{$custom-control-height-border} + #{$custom-control-font-size-base - $custom-control-font-size-sm});
        }

        .form-group-inner {
            height: $custom-control-height-sm;
            padding: $custom-control-padding-y-sm $custom-control-padding-x-sm;

            &::after {
                width: 2em;
                background-size: .5em .5em;
            }

            .custom-select {
                padding-left: $custom-control-padding-x-sm;
            }
        }
    }

    &.custom-select-field-lg {
        & > label {
            font-size: $custom-control-font-size-lg;
        }
            
        &:not(.is-empty),
        &.has-changed,
        &.has-changed.is-empty {
            & > label {
                font-size: $custom-control-shrink-font-size-lg;
                padding: $custom-control-padding-y-lg / 1.15 $custom-control-padding-x-lg + ($custom-control-label-font-size-lg - $custom-control-shrink-font-size-lg) 0;
            }

            .custom-select {
                padding-top: #{$custom-control-font-size-base - ($custom-control-font-size-lg - $custom-control-font-size-base)};
            }
        }

        &.is-empty > label,
        &.has-changed.is-empty > label {
            line-height: calc(#{px($custom-control-height-inner-lg)} + #{$custom-control-height-border} + .5em);
        }

        .form-group-inner {
            height: $custom-control-height-lg;
            font-size: $custom-control-label-font-size-lg;
            
            &::after {
                width: 2.8em;
                background-size: 1em 1em;
            }

            .custom-select {
                padding-left: $custom-control-padding-x-lg;
            }
        }
    }

    .custom-select {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: none;
        margin: 0;
        padding: 0 $custom-control-padding-x;
        border: 0;
        z-index: 1;
        transition: all .15s ease-out;
        -webkit-appearance: none; 
        -moz-appearance: none;
        appearance: none;

        &:focus {
            background: none;
            border-color: none;
            outline: none;
            box-shadow: none;
        }
    }
}

// Custom Input

.custom-input-field,
.custom-textarea-field {
    position: relative;

    & > label {
        left: 0;
        margin: 0;
        opacity: 0;
        z-index: -1;
        line-height: 1.5;
        position: absolute;
        transition: all .15s ease-out;
        padding-left: $custom-control-padding-x;
        font-size: $custom-control-label-font-size;
        padding: $custom-control-padding-y $custom-control-padding-x 0;
    }

    &:not(.is-empty),
    &.has-changed,
    &.has-changed.is-empty {
        .custom-control::placeholder {
            opacity: 0;
        }

        & > label {
            z-index: 2;
            opacity: 1;
            transform: none;
            line-height: 1em;
            font-size: $custom-control-shrink-font-size-base;
            padding: $custom-control-padding-y * .75 $custom-control-padding-x + ($custom-control-label-font-size - $custom-control-shrink-font-size-base / 1.05) 0;

            & + .form-group-inner .custom-control {
                padding-top: $custom-control-font-size-base + $custom-control-padding-y;
            }
        }
    }

    &.custom-textarea-field:not(.is-empty) textarea,
    &.custom-textarea-field.has-changed textarea,
    &.custom-textarea-field.is-empty.has-changed textarea {
        padding-top: $custom-control-padding-y * 2.5;
    }

    &.custom-input-field-sm,
    &.custom-textarea-field-sm {
        &:not(.is-empty),
        &.has-changed,
        &.has-changed.is-empty {
            & > label {
                font-size: $custom-control-shrink-font-size-sm;
                padding: $custom-control-padding-y-sm / 1.15 $custom-control-padding-x-sm + ($custom-control-label-font-size-sm - $custom-control-shrink-font-size-sm / 1.15) 0;
            }
    
            .form-group-inner .custom-control {
                padding-top: $custom-control-label-font-size-sm * 1.5;
            }
        }
    }

    &.custom-input-field-lg,
    &.custom-textarea-field-lg {
        &:not(.is-empty),
        &.has-changed,
        &.has-changed.is-empty {
            & > label {
                font-size: $custom-control-shrink-font-size-lg;
                padding: $custom-control-padding-y-lg / 1.15 $custom-control-padding-x-lg + ($custom-control-label-font-size-lg - $custom-control-shrink-font-size-lg) 0;
            }
            
            .form-group-inner .custom-control {
                padding-top: $custom-control-font-size-lg;
            }
        }
    }

    &.is-valid .valid-feedback,
    &.is-invalid .invalid-feedback  {
        display: block;
    }

    .custom-control {
        // Form control sizing
        //
        // Build on `.form-control` with modifier classes to decrease or increase the
        // height and font-size of form controls
        &.custom-control-sm {
            height: $custom-control-height-sm;
            padding: $custom-control-padding-y-sm $custom-control-padding-x-sm;
            font-size: $custom-control-label-font-size-sm;
            line-height: $custom-control-line-height-sm;
            @include border-radius($custom-control-border-radius-sm);
        }

        &.custom-control-lg {
            height: $custom-control-height-lg;
            padding: $custom-control-padding-y-lg $custom-control-padding-x-lg;
            font-size: $custom-control-label-font-size-lg;
            line-height: $custom-control-line-height-lg;
            @include border-radius($custom-control-border-radius-lg);
        }
    }
}

.input-group {

    &.is-invalid .input-group-prepend::after,
    &.is-invalid .input-group-prepend span,
    &.is-invalid .input-group-append::after,
    &.is-invalid .input-group-append span,
    &.is-invalid .form-control,
    &.is-invalid .custom-select,
    &.is-invalid .custom-control {
        color: $form-feedback-invalid-color;
        border-color: $form-feedback-invalid-color;
    }

    &.is-invalid .form-control,
    &.is-invalid .custom-select,
    &.is-invalid .custom-control {
        &::placeholder {
            color: $form-feedback-invalid-color;
        }
    }

    & > div:not(.input-group-prepend):not(.input-group-append):not(:last-child) .form-control,
    & > div:not(.input-group-prepend):not(.input-group-append):not(:last-child) .custom-control,
    & > div:not(.input-group-prepend):not(.input-group-append):not(:last-child) .custom-select {
        border-right: 0;
    }

    & > div:not(.input-group-prepend):not(.input-group-append):not(:first-child) .form-control,
    & > div:not(.input-group-prepend):not(.input-group-append):not(:first-child) .custom-control,
    & > div:not(.input-group-prepend):not(.input-group-append):not(:first-child) .custom-select {
        border-left: 0;
    }

    .input-group-append,
    .input-group-prepend {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            top: 50%;
            z-index: 1;
            padding: .75em;
            transform: translateY(-50%);
        }
    }

    .input-group-text {
        font-size: $custom-control-font-size-base;
        padding: $custom-control-padding-y $custom-control-padding-x;
    }

    .input-group-prepend {
        .input-group-text {
            border-right: 0;
        }

        &::after {
            right: 0;
            border-right: $input-border-width solid $input-border-color;
        }
    }

    .input-group-append {
        .input-group-text {
            border-left: 0;
        }

        &::after {
            left: 0;
            border-left: $input-border-width solid $input-border-color;
        }
    }

    .input-group-text {
        background: inherit;
    }
}