@use 'sass:map';
@use '../src/internal' as *;

/*
    Mixins
*/
@mixin cirrus-input {
    width: 100%;
    border: 1px solid rgba(hex-to-rgb(fill('gray', '300')), var(--border-opacity, 1));
    border-radius: 3px;
    font-family: map.get($map: $font-families, $key: secondary);
    font-size: var(--font-size-m);
    letter-spacing: 0.02rem;
    transition: box-shadow 0.3s;
    outline: none;
    padding: 0.85rem 1.1rem;

    &:focus,
    &.input-focused {
        border-color: $cirrus-input-border;
        box-shadow: 0 0 0 0.2rem transparentize($cirrus-input-border, $focus-opacity),
            inset 0px 1px 8px rgba(0, 0, 0, 0.07);
        outline: 0;

        &[type='range'] {
            box-shadow: none;
        }

        &.input-success {
            background-color: transparentize(fill('success'), 0.05) !important;
            @include input-success();
        }

        &.input-error {
            background-color: transparentize(fill('danger'), 0.05) !important;
            @include input-error();
        }
    }

    /* Input Field Sizes */
    @each $size, $property-map in $input-sizes {
        &.input--#{$size} {
            @include explode-properties($property-map);
        }
    }

    /* Hold Font Awesome glyphs inside input fields */
    /* More sizes coming soon */
    &.input-contains-icon,
    &.input-contains-icon-left {
        padding-left: 2.75rem;
    }

    &.input-contains-icon-right {
        padding-right: 2.75rem;
    }

    // Left side padding for input with glyph
    @each $size, $value in $input-contains-icon-padding {
        &.input-contains-icon.input--#{$size},
        &.input-contains-icon-right.input-#{$size} {
            padding-left: $value;
        }
    }

    @each $size, $property-map in $input-icon-sizes {
        &.input-contains-icon.input--#{$size} ~ .icon,
        &.input-contains-icon-left.input--#{$size} ~ .icon,
        &.input-contains-icon-right.input--#{$size} ~ .icon.icon-right {
            @include explode-properties($property-map);
        }
    }
}

/* This is just an extended portion of an input which is just like a label and is read only */
/* This will style the controls if they are the leftmost control in the form group for labels, inputs, and buttons. */
@mixin form-group-border-radius-override {
    /* Style the front controls */
    &:first-child:not(:last-child) {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    /* Style the middle controls */
    &:not(:first-child):not(:last-child) {
        border-radius: 0 !important;
        margin-left: -1px;
        margin-right: -1px; /* Remove spacing in middle controls */
    }

    /* Handles right most control in form group */
    &:last-child:not(:first-child) {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        margin-left: -1px;
        z-index: 0;
    }
}

@if should-generate-classes($FORMS) {
    /* FORMS */

    /*
        Styles
    */
    input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']),
    select {
        @include cirrus-input();

        /* Search field */
        &[type='search'],
        &.search {
            background-repeat: no-repeat;
            background-position: left 0.6rem center;
            background-image: url($img-search); /* NEEDS FIXING */
            padding-left: 2rem !important;
        }

        &[type='color'] {
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
            box-sizing: border-box;
            transition: 0.3s;
            outline: 0;
            position: relative;
            height: 3rem;
            background-color: #fff;
            padding: 0.55rem 0.8rem !important;
        }
        
        &[type='range'] {
            outline: 0;
            padding: 0;
        }

        &.input-success {
            background-color: rgba(0, 224, 0, 0.05) !important;
            @include input-success();
        }

        &.input-error {
            background-color: rgba(244, 67, 54, 0.05) !important;
            @include input-error();
        }
    }

    textarea,
    textarea[type='text'] {
        min-height: 8rem;
        line-height: 1.5rem;
        resize: vertical;
        @include cirrus-input();
    }

    select {
        background-color: #fff;
        
        @include cirrus-input();

        &[multiple] option {
            padding: 0.2rem 0.4rem;
        }

        /* Fixes for Safari and other browsers for consistent UI */
        &.select:not([size]):not([multiple]) {
            background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E")
                no-repeat
                right
                0.85rem
                center/.5rem
                0.6rem
                no-repeat;
            appearance: none;
        }
    }

    input:not([class*='btn-']):disabled,
    input:not([class*=' btn-']):disabled:hover,
    select:disabled,
    textarea:disabled {
        background-color: fill('gray', '100');
        cursor: not-allowed;
        border: 1px solid fill('gray', '100');
    }

    label {
        &.label {
            color: fill('gray', '700');
            display: inline-block; /* changed from block */
            font-weight: bold;
            margin-top: 0.8rem;
        }

        + .input-control {
            margin-top: 0;
        }

        &.label:not(:last-child) {
            margin-bottom: 0;
        }

        &:first-child:not(:last-child):not(.form-group-label) {
            margin-right: 0.5rem;
        }

        &:not(:first-child):not(:last-child):not(.form-group-label) {
            margin: 0 0.5rem;
        }

        &:last-child:not(:first-child):not(.form-group-label) {
            margin-left: 0.5rem;
        }
    }

    /* Required asterisk */
    .required {
        /* Use this in a span or a div */
        position: relative;
        top: 1px;
        font-weight: bold;
        color: fill('red', '700');
        padding-left: 0.1rem;
    }

    /* Used for when the input controls have another control adjacent to it but we want to position it inside the input field like font-awesome glyphs. As of 0.5.2, it is the default container for input fields. */
    .input-control {
        position: relative;
        margin: 0.5rem 0;
    }

    .input-contains-icon ~ .icon,
    .input-contains-icon-left ~ .icon,
    .input-contains-icon-right ~ .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .input-contains-icon ~ .icon:not(.icon-right),
    .input-contains-icon-left ~ .icon.icon-left {
        /* Nomral input only */
        position: absolute;
        left: 0;
        top: 0;
        width: 3rem;
        z-index: 1;
    }

    .input-contains-icon-right ~ .icon.icon-right {
        position: absolute;
        pointer-events: none;
        line-height: 2.75rem;
        vertical-align: baseline;
        top: 0;
        right: 0;
        width: 3rem;
        z-index: 1;
    }

    /* Form groups that group inputs with other controls. */
    .form-group {
        display: flex;
        margin: 0.5rem 0; /* Add margin to the container since they have been removed from children */

        /* Fixes the text width being cut off */
        .form-group-btn {
            flex: 1 0 auto;
            margin-bottom: 0;
            @include form-group-border-radius-override();
            @include elevate-on-focus();
        }

        /* Form group controls */
        .form-group-label {
            background-color: var(--cirrus-form-group-bg);
            border: 1px solid fill('gray', '300');
            border-radius: 0.2rem;
            color: var(--cirrus-form-group-fg);
            margin: 0;
            padding: 0.8rem;
            user-select: none;
            @include form-group-border-radius-override();

            @each $size, $font-size in $form-label-sizes {
                &.label--#{$size} {
                    font-size: $font-size;
                }
            }
        }

        /* Keeps inputs in form group above other components */
        .form-group-input {
            @include form-group-border-radius-override();
            @include elevate-on-focus();
        }
    }

    /* Change place holder color */
    ::-moz-placeholder {
        color: $placeholder-fg; /* Lighter than the default */
    }

    ::-webkit-input-placeholder {
        color: $placeholder-fg; /* Lighter than the default */
    }
}