@charset 'utf-8';

/*  ========================================================================
    JUICE -> ELEMENTS -> FORM -> INPUT
    ========================================================================  */

// Check if the elements with input should be imported
@if $import-elements and $import-element-input {
    input {
        align-items: center;
        background-color: $input-background-color;
        border: 0 $input-border-style $input-border-color;
        border-bottom-left-radius: $input-border-radius-bottom-left;
        border-bottom-right-radius: $input-border-radius-bottom-right;
        border-bottom-width: $input-border-width-bottom;
        border-left-width: $input-border-width-left;
        border-top-left-radius: $input-border-radius-top-left;
        border-top-right-radius: $input-border-radius-top-right;
        border-top-width: $input-border-width-top;
        border-right-width: $input-border-width-right;
        color: $input-font-color;
        display: flex;
        font-family: $input-font-family;
        font-size: $input-font-size;
        height: $input-height;
        line-height: normal;
        margin: 0;
        margin-bottom: $input-element-spacing;
        max-width: 100%;
        padding: 0 $input-content-spacing;
        position: relative;
        outline: none;
        width: 100%;
        z-index: stack-index('default');

        // Pseudo classes
        &:hover {
            background-color: $input-background-color-hover;
            border-color: $input-border-color-hover;
            color: $input-font-color-hover;
            z-index: stack-index('hover');
        }

        &:focus {
            background-color: $input-background-color-focus;
            border-color: $input-border-color-focus;
            box-shadow: 0 0 0 $input-accessibility-focus-width $input-accessibility-focus-color;
            color: $input-font-color-focus;
            z-index: stack-index('focus');
        }

        &:active {
            background-color: $input-background-color-active;
            border-color: $input-border-color-active;
            box-shadow: 0 0 0 $input-accessibility-focus-width $input-accessibility-focus-color;
            color: $input-font-color-active;
            z-index: stack-index('active');
        }

        // Pseudo elements
        &::placeholder {
            color: $input-placeholder-color
        }

        // Modifiers: Props
        &[disabled] {
            @include disabled();
            background-color: $input-background-color !important;
            border-color: $input-border-color !important;
            color: $input-font-color !important;
        }

        // Check if the input size modifiers should be declared
        @if $input-size-modifiers {
            // Cycle through all of the sizes
            @each $size in $sizes {
                // Modifiers: Sizes
                &.is-#{$size} {
                    font-size: map-get($input-font-size-sizes, $size);
                    height: map-get($input-height-sizes, $size);
                    padding: 0 map-get($input-content-spacing-sizes, $size);
                }

                // Check if the input size modifiers with breakpoints should be declared
                @if $input-size-modifiers-with-breakpoints {
                    // Cycle through all of the breakpoints
                    @each $breakpoint-name, $breakpoint-value in $breakpoints {
                        // Breakpoint
                        @include breakpoint($breakpoint-name) {
                            // Modifiers: Size
                            &.is-#{$size}\@#{$breakpoint-name} {
                                font-size: map-get($input-font-size-sizes, $size);
                                height: map-get($input-height-sizes, $size);
                                padding: 0 map-get($input-content-spacing-sizes, $size);
                            }
                        }
                    }
                }
            }
        }

        // Check if the input feedback modifiers should be declared
        @if $input-feedback-modifiers {
            // Cycle through all of the feedback colors
            @each $feedback-name, $feedback-value in $feedback-colors {
                // Modifiers: Feedback colors
                &.has-#{$feedback-name} {
                    border-color: feedback-color($feedback-name);

                    // Pseudo classes
                    &:focus,
                    &:active {
                        box-shadow: 0 0 0 $input-accessibility-focus-width feedback-color('#{$feedback-name}-accessibility-focus');
                    }

                    // Modifiers: Props
                    &[disabled] {
                        border-color: feedback-color($feedback-name) !important;
                    }
                }
            }
        }

        // Check if the input honeypot modifier should be declared
        @if $input-honeypot-modifier {
            // Modifiers
            &.input--honeypot,
            &.input--hp {
                display: none !important;
            }
        }

        // Check if the input pill modifier should be declared
        @if $input-pill-modifier {
            // Modifiers
            &.input--pill {
                border-radius: 999px;
            }
        }
    }

    // Checkbox and radio
    input[type=checkbox],
    input[type=radio] {
        cursor: pointer;
        display: inline-flex;
        height: auto;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 0;
        padding: 0;
        position: relative;
        top: 2px;
        width: auto;
    }

    // Color
    input[type=color] {
        cursor: pointer;
        display: inline-flex;
        max-width: 60px;
        min-width: 60px;
        padding: 5px;

        // Pseudo elements
        &::-webkit-color-swatch-wrapper {
            background-color: $input-background-color;
            border-bottom-left-radius: $input-border-radius-bottom-left;
            border-bottom-right-radius: $input-border-radius-bottom-right;
            border-top-left-radius: $input-border-radius-top-left;
            border-top-right-radius: $input-border-radius-top-right;
            padding: 0;
        }

        &::-webkit-color-swatch {
            border: none;
            border-bottom-left-radius: $input-border-radius-bottom-left;
            border-bottom-right-radius: $input-border-radius-bottom-right;
            border-top-left-radius: $input-border-radius-top-left;
            border-top-right-radius: $input-border-radius-top-right;
        }

        // Modifiers
        &.input--pill {
            // Pseudo elements
            &::-webkit-color-swatch {
                border-radius: 999px;
            }
        }
    }

    // File
    input[type=file] {
        border: none;
        height: auto;
        padding: 0;
    }

    // Radio
    input[type=radio] {
        border-radius: 100%;
    }

    // Range
    input[type=range] {
        box-shadow: none !important;
    }
}