/* ------------------------------------------------------------------------------
 *
 *  # Form styles
 *
 *  Basic form styles and overrides of default Bootstrap styles
 *
 * ---------------------------------------------------------------------------- */


//
// Base styles
//

// Legend
legend {
    padding-top: ($spacer / 2);
    padding-bottom: ($spacer / 2);
    margin-bottom: $spacer;
    font-size: $font-size-base;

    // Remove top padding in first items
    fieldset:first-child & {
        &:first-child {
            padding-top: 0;
        }
    }
}

// Multiple select
select[multiple],
select[size] {
    height: 200px;
    padding: $input-padding-x;

    // Option
    option {
        padding: $dropdown-item-padding-y $dropdown-item-padding-x;
        @include border-radius($border-radius);

        + option {
            margin-top: $dropdown-item-spacer-y;
        }
    }
}

// Textual form controls
.form-control {
    background-clip: border-box;

    // Disabled and readonly states
    &:disabled {
        color: $input-disabled-color;
    }
    &[readonly] {
        box-shadow: none;
        border-color: $input-border-color;
    }

    // Apply contextual shadow that acts as a second border
    &.is-valid:focus {
        box-shadow: $input-box-shadow, 0 0 0 $input-border-width $success inset;
    }
    &.is-invalid:focus {
        box-shadow: $input-box-shadow, 0 0 0 $input-border-width $danger inset;
    }

    // Filled inputs
    &-filled {
        background-color: $input-filled-bg;
        border-width: 0 0 $input-border-width 0;
        @include border-bottom-radius(0);

        // Focus state
        &:focus {
            background-color: $input-filled-focus-bg;
        }
        &.custom-select:focus,
        &:focus {
            box-shadow: 0 (-$input-border-width) 0 $input-focus-border-color inset;
        }

        // Disabled and readonly states
        &:disabled,
        &[readonly] {
            background-color: $input-filled-disabled-bg;
        }
        &[readonly] {
            box-shadow: none;
            border-color: $input-border-color;
        }

        // Validation states
        &.is-valid:focus {
            box-shadow: 0 (-$input-border-width) 0 0 $success inset;
        }
        &.is-invalid:focus {
            box-shadow: 0 (-$input-border-width) 0 0 $danger inset;
        }
    }
}

// Form groups
.form-group {

    // Remove bottom margin from the last group
    .form-group:last-child {
        margin-bottom: 0;
    }

    // Add top margin on certain breakpoints
    @include media-breakpoint-down(sm) {
        [class*="col-md-"]:not([class*=col-form-label]) + [class*="col-md-"] {
            margin-top: $form-group-margin-bottom;
        }
    }
    @include media-breakpoint-down(md) {
        [class*="col-lg-"]:not([class*=col-form-label]) + [class*="col-lg-"] {
            margin-top: $form-group-margin-bottom;
        }
    }
    @include media-breakpoint-down(lg) {
        [class*="col-xl-"]:not([class*=col-form-label]) + [class*="col-xl-"] {
            margin-top: $form-group-margin-bottom;
        }
    }
}

// Remove top padding in labels on certain breakpoints
// to match vertical form spacings
[class*=col-form-label] {
    @include media-breakpoint-down(sm) {
        &[class*="col-md-"] {
            padding-top: 0;
        }
    }
    @include media-breakpoint-down(md) {
        &[class*="col-lg-"] {
            padding-top: 0;
        }
    }
    @include media-breakpoint-down(lg) {
        &[class*="col-xl-"] {
            padding-top: 0;
        }
    }
}


//
// Floating labels
//

.form-group-floating {

    // Floating label
    .label-floating {
        position: absolute;
        top: $input-padding-y * 2;
        left: $input-padding-x;
        color: $input-placeholder-color;
        margin: 0;
        pointer-events: none;
        transform: scale(1);
        transform-origin: left top;
        transition: all cubic-bezier(0.4, 0, 0.2, 1) $component-transition-timer;
    }
    .form-group-feedback-left .label-floating {
        left: ($input-padding-x * 2) + $icon-font-size;
    }

    // With icons
    .form-control-feedback {
        display: flex;
        align-items: center;
        height: 100%;

        i {
            position: static;
        }
    }

    // Center labels in horizontal form
    .col-form-label {
        padding-top: add($input-padding-y * 2, $input-border-width);
        padding-bottom: add($input-padding-y * 2, $input-border-width);
    }
    .form-control {
    
        // Hide default placeholder.
        // Note: placeholder IS REQUIRED in inputs and textarea
        &::placeholder {
            color: transparent;
        }
    }

    // Set custom padding. Equals default input padding x 2
    .form-control,
    .custom-select {
        padding-top: $input-padding-y * 2;
        padding-bottom: $input-padding-y * 2;

        // Make sure label and border colors match
        &:focus ~ .label-floating {
            color: $input-focus-border-color;
        }
    }
    .form-control:not(textarea),
    .custom-select {
        height: add($input-line-height * 1em, add($input-padding-y * 4, $input-height-border, false));
    }

    // Validation
    .is-valid {
        &:not(:placeholder-shown),
        &:focus {
            ~ .label-floating {
                color: $success;
            }
        }
    }
    .is-invalid {
        &:not(:placeholder-shown),
        &:focus {
            ~ .label-floating {
                color: $danger;
            }
        }
    }


    //
    // Styles base
    //

    // Outline
    .form-control-outline {
        &:not(:placeholder-shown),
        &:focus {
            ~ .label-floating {
                top: 0;
                left: $input-padding-x;
                background-color: $input-bg;
                transform: scale(0.8) translateY(-50%);
                box-shadow: ($input-padding-x / 2) 0 0 0 $input-bg, -($input-padding-x / 2) 0 0 0 $input-bg;
            }
        }
    }

    // Filled
    .form-control-filled,
    .form-control-outline-within {
        &:not(:placeholder-shown),
        &:focus {
            padding-top: $input-padding-y * 3;
            padding-bottom: $input-padding-y;

            ~ .label-floating {
                top: $input-padding-y * 1.1;
                transform: scale(0.8);
            }
        }
    }
}


//
// Checkboxes and radios
//

// Container
.form-check {

    // Disabled state
    &.disabled {
        color: $form-check-disabled-color;

        .form-check-label {
            cursor: $cursor-disabled;
        }
    }
}

// In horizontal form group
.form-check-horizontal {
    padding-top: ($input-padding-y + rem-calc($input-border-width));
    padding-bottom: ($input-padding-y + rem-calc($input-border-width));

    @include media-breakpoint-down(sm) {
        [class*="col-md-"] > & {
            padding-top: 0;
            padding-bottom: 0;
        }
    }
    @include media-breakpoint-down(md) {
        [class*="col-lg-"] > & {
            padding-top: 0;
            padding-bottom: 0;
        }
    }
    @include media-breakpoint-down(lg) {
        [class*="col-xl-"] > &{
            padding-top: 0;
            padding-bottom: 0;
        }
    }
}

// Input
.form-check-input {
    &:disabled ~ .form-check-label {
        cursor: $cursor-disabled;
    }
}

// Label
.form-check-label {
    cursor: pointer;
}

// Inline list
.form-check-inline {

    // Label
    .form-check-label {
        display: inline-flex;
        align-items: center;
    }

    // Last item
    &:last-child {
        margin-right: 0;
    }
}

// Right position
.form-check-right {
    padding-left: 0;
    padding-right: $form-check-input-gutter;

    // Reverse input direction
    .form-check-input,
    input {
        left: auto;
        right: 0;
    }

    // Inline list
    &.form-check-inline {
        padding: 0;
        
        // Input
        .form-check-input {
            margin-right: 0;
            margin-left: $form-check-inline-input-margin-x;
        }
    }
}


//
// Form control feedback states
//

// Default left icon position
.form-group-feedback {
    position: relative;

    // Left alignment
    &-left {

        // Stick icon to the left
        .form-control-feedback {
            left: 0;
        }

        // Ensure icons don't overlap text
        .form-control {
            padding-left: $input-padding-x + $input-btn-padding-x + $icon-font-size;

            // Sizes
            &-lg {
                padding-left: $input-padding-x-lg + $input-btn-padding-x-lg + $icon-font-size;
            }
            &-sm {
                padding-left: $input-padding-x-sm + $input-btn-padding-x-sm + $icon-font-size;
            }
        }
    }

    // Right alignment
    &-right {

        // Stick icon to the right
        .form-control-feedback {
            right: 0;
        }

        // Ensure icons don't overlap text
        .form-control {
            padding-right: $input-padding-x + $input-btn-padding-x + $icon-font-size;

            // Sizes
            &-lg {
                padding-right: $input-padding-x-lg + $input-btn-padding-x-lg + $icon-font-size;
            }
            &-sm {
                padding-right: $input-padding-x-sm + $input-btn-padding-x-sm + $icon-font-size;
            }
        }
    }
}

// Feedback icon
.form-control-feedback {
    position: absolute;
    top: 0;
    color: $input-color;
    padding-left: $input-padding-x;
    padding-right: $input-padding-x;
    line-height: $input-height;
    min-width: $icon-font-size;

    // Large size
    &-lg {
        padding-left: $input-padding-x-lg;
        padding-right: $input-padding-x-lg;
        line-height: $input-height-lg;
    }

    // Small size
    &-sm {
        padding-left: $input-padding-x-sm;
        padding-right: $input-padding-x-sm;
        line-height: $input-height-sm;
    }
}