@import './theme.scss';
@import '../../helpers/_mixins';

/* FORMS */

/*
    Mixins
*/
@mixin cirrus-input {
    width: 100%;
    border: 1px solid map-get($grays, '300');
    border-radius: 3px;
    font-family: 'Nunito Sans';
    font-size: var(--font-size-m);
    letter-spacing: 0.02rem;
    transition: all 0.3s;
    outline: none;
    padding: 0.85rem 1.1rem;

    /* Input Field Sizes */
    &.input-xsmall,
    select.input-xsmall {
        font-size: var(--font-size-xs);
        padding: 0.35rem 0.9rem;
    }

    &.input-small,
    select.input-small {
        font-size: var(--font-size-s);
        padding: 0.55rem 1rem;
    }

    &.input-large,
    select.input-large {
        font-size: var(--font-size-l);
    }

    &.input-xlarge,
    select.input-xlarge {
        font-size: var(--font-size-xl);
    }

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

    &.input-contains-icon.input-xsmall,
    &.input-contains-icon-right.input-xsmall {
        padding-left: 2rem;
    }

    &.input-contains-icon.input-xsmall ~ .icon,
    &.input-contains-icon-left.input-xsmall ~ .icon,
    &.input-contains-icon-right.input-xsmall ~ .icon.icon-right {
        line-height: 1.75rem;
        width: 1.75rem;
        font-size: 7px;
    }

    &.input-contains-icon.input-small,
    &.input-contains-icon-right.input-small {
        padding-left: 2.5rem;
    }

    &.input-contains-icon.input-small ~ .icon,
    &.input-contains-icon-left.input-small ~ .icon,
    &.input-contains-icon-right.input-small ~ .icon.icon-right {
        width: 2.5rem;
        font-size: 14px;
    }

    &.input-contains-icon.input-large,
    &.input-contains-icon-right.input-large {
        padding-left: 3.5rem;
    }

    &.input-contains-icon.input-large ~ .icon,
    &.input-contains-icon-left.input-large ~ .icon,
    &.input-contains-icon-right.input-large ~ .icon.icon-right {
        line-height: 3.5rem;
        width: 3.5rem;
        font-size: 28px;
    }

    &.input-contains-icon.input-xlarge,
    &.input-contains-icon-right.input-xlarge {
        padding-left: 4rem;
    }

    &.input-contains-icon.input-xlarge ~ .icon,
    &.input-contains-icon-left.input-xlarge ~ .icon,
    &.input-contains-icon-right.input-xlarge ~ .icon.icon-right {
        line-height: 2.5rem;
        width: 3.75rem;
        font-size: 35px;
    }
}

/*
    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('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path opacity="0.45" d="M14.891,14.39l-0.5.5a0.355,0.355,0,0,1-.5,0L9.526,10.529a5.3,5.3,0,1,1,2.106-4.212,5.268,5.268,0,0,1-1.1,3.21l4.362,4.362A0.354,0.354,0,0,1,14.891,14.39ZM6.316,2.418a3.9,3.9,0,1,0,3.9,3.9A3.9,3.9,0,0,0,6.316,2.418Z"/></svg>'); /* NEEDS FIXING */
        padding-left: 2rem !important;
        -webkit-appearance: none; /* Fix Safari issue */
    }

    &[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;
    }

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

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

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

input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']):focus,
select:focus,
textarea:focus,
textarea[type='text']:focus,
input[type='text'].input-focused,
.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);

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

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

select {
    @include cirrus-input();
    // $select-sizes: ( Deprecated 0.6.2
    //     'xsmall': 0.65rem 0.9rem,
    //     'small': 0.75rem 1rem,
    //     'large': 0.95rem 1.2rem,
    //     'xlarge': 1.05rem 1.3rem,
    // );

    background-color: #fff;
    border: 1px solid #ddd;

    &[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;
        -webkit-appearance: none;
    }

    /* Select sizes */
    // @each $size, $padding in $select-sizes {
    //     &.input-#{$size} {
    //         padding: $padding;
    //     }
    // }
}

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

label {
    &.label {
        color: map-get($grays, '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: map-get($reds, '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 {
    /* 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;
        }
    }

    display: flex;
    display: -ms-flexbox;
    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 {
        -webkit-flex: 1 0 auto;
        -ms-flex: 1 0 auto;
        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 map-get($grays, '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();

        &.label-xsmall {
            font-size: 0.55rem;
            padding: 0.5rem 0.9rem;
        }

        &.label-small {
            font-size: 0.75rem;
            padding: 0.55rem 1rem;
        }

        &.label-large {
            font-size: 1.5rem;
        }

        &.label-xlarge {
            font-size: 2rem;
        }
    }

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