$sd-forms-placeholder-text: $gray7;
$sd-forms-filled-text: $gray8;
$sd-forms-check-radio-color: $accessible-blue;
$sd-forms-active-color: $accessible-blue;
$sd-forms-hover-color: $blue-accessible-contrast;
$sd-forms-focus-color: $accessible-blue;
$sd-forms-error-color: $booster-red;
$sd-forms-success-color: $accessible-green;
$sd-forms-input-outline: $gray7;
$sd-forms-forced-state: $gray5;
$sd-forms-disabled-color: $gray2;
$sd-forms-disabled-outline: $gray3;
$sd-radio-check-size: 18px;

/* Generic form styles
   ========================================================================== */

fieldset {
    border: none;
    margin: 0;
    padding: 0;
    legend.sd-form-label {
        margin: 0 0 16px;
    }
}

.sd-form-label {
    display: block;
    margin: 0 0 4px;
    font-size: $sd-x-small-text;
    &-text {
        display: block;
        margin-bottom: 4px;
    }
}

.sd-form-error-msg {
    display: none;
    font-size: $sd-x-small-text;
    color: $sd-forms-error-color;
}

.sd-form-field {
    position: relative;
    &.mod-label-inside {
        .sd-form-label {
            position: absolute;
            top: 12px;
            left: 16px;
            margin: 0;
            font-size: $sd-base-text;
            line-height: $sd-base-line-height;
            color: $sd-forms-placeholder-text;
            transition: all 0.1s ease;
        }
        .sd-form-input::placeholder,
        &:not(.mod-active) .sd-form-select:invalid,
        .sd-form-select:disabled {
            // Do not display placeholder attribute in text input for this modifier
            // Do not display "placeholder" option element in select field when field is not active
            // Never display any option elements when select fields are disabled; only display label element
            color: rgba(0, 0, 0, 0);
        }

        &.mod-active {
            .sd-form-input {
                padding-top: 21px;
                padding-bottom: 5px;
            }
            .sd-form-label {
                top: 5px;
                font-size: $sd-mini-text;
                font-weight: $sd-font-weight-bold;
            }
        }

        @keyframes onAutoFillStart {
            from {
                /* empty animation to hook into */
            }
            to {
                /* empty animation to hook into */
            }
        }

        .sd-form-input:-webkit-autofill,
        .sd-form-input:-webkit-autofill-strong-password,
        .sd-form-input:-webkit-autofill-strong-password-viewable,
        .sd-form-input:-internal-autofill-selected {
            // Expose a hook for JavaScript when auto fill is shown.
            // JavaScript can capture 'animationstart' events
            animation-name: onAutoFillStart;
        }
    }
    &.mod-horizontal-layout {
        .sd-form-label {
            @include sd-viewport($sd-desktop) {
                display: inline-block;
                margin-right: 20px !important; // TODO: remove important flag when we deprecate old form styles
                &:last-of-type {
                    margin-right: 0 !important; // TODO: remove important flag when we deprecate old form styles
                }
            }
        }
    }
    &.mod-inline-block {
        display: inline-block;
        &.mod-label-inside {
            .sd-form-select {
                padding-top: 21px;
                padding-bottom: 5px;
            }
        }
        + .sd-form-error-msg {
            display: block;
        }
    }
}

/* Input fields
   ========================================================================== */

// TODO: remove the input type selectors as soon as we deprecate old form styles.
// we should only apply styles to the class.
input[type='color'].sd-form-input,
input[type='date'].sd-form-input,
input[type='datetime'].sd-form-input,
input[type='datetime-local'].sd-form-input,
input[type='email'].sd-form-input,
input[type='month'].sd-form-input,
input[type='number'].sd-form-input,
input[type='password'].sd-form-input,
input[type='search'].sd-form-input,
input[type='tel'].sd-form-input,
input[type='text'].sd-form-input,
input[type='time'].sd-form-input,
input[type='url'].sd-form-input,
input[type='week'].sd-form-input,
.sd-form-textarea,
.sd-form-select {
    display: block;
    width: 100%;
    height: 48px;
    padding: 12px 16px;
    border: none;
    background-color: $white;
    background-size: 16px auto;
    background-repeat: no-repeat;
    background-position: right 16px center;
    border-radius: $sd-base-border-radius;
    color: $sd-forms-filled-text;
    font-size: $sd-base-text;
    line-height: $sd-base-line-height;
    margin-bottom: 8px;
    max-width: 100%;
    box-shadow: 0 0 0 1px $sd-forms-input-outline inset;
    transition: box-shadow 0.6s ease;
    appearance: none;

    &:focus {
        border: none; // TODO: remove this override when we deprecate old form styles
        box-shadow: 0 0 0 2px $sd-forms-active-color inset;
        outline: none;
    }

    &::placeholder {
        color: $sd-forms-placeholder-text;
    }

    &::-moz-placeholder {
        /* Firefox 19+ */
        opacity: 1;
    }

    &.mod-invalid {
        box-shadow: 0 0 0 1px $sd-forms-error-color inset;
        padding-right: 48px;

        + .sd-form-error-msg {
            display: block;
            margin: -4px 0 8px;
        }
        &:focus {
            box-shadow: 0 0 0 2px $sd-forms-error-color inset;
        }
        &:not(.sd-form-select) {
            // red exclamation mark icon
            background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTkgOGMwIC42LS40IDEtMSAxYTEgMSAwIDAgMS0xLTFWNGMwLS41LjUtMSAxLTEgLjYgMCAxIC41IDEgMXY0em0tMSA1YTEgMSAwIDAgMSAwLTJjLjYgMCAxIC40IDEgMXMtLjQgMS0xIDF6TTggMGE4IDggMCAxIDAgMCAxNkE4IDggMCAwIDAgOCAweiIgZmlsbD0iI0QxMkYxMSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+);
        }
    }

    &.mod-valid {
        box-shadow: 0 0 0 1px $sd-forms-success-color inset;
        padding-right: 48px;
        &:focus {
            box-shadow: 0 0 0 2px $sd-forms-success-color inset;
        }
        &:not(.sd-form-select) {
            // green checkmark icon
            background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTggMTZBOCA4IDAgMSAxIDggMGE4IDggMCAwIDEgMCAxNnptMi4yLTEwLjZMNyA5LjUgNS43IDguM2ExIDEgMCAwIDAtMS40IDEuNGwyIDJhMSAxIDAgMCAwIDEuNSAwbDQtNWExIDEgMCAxIDAtMS42LTEuM3oiIGZpbGw9IiMyRjg1MEQiLz48L3N2Zz4=);
        }
    }

    &:disabled {
        background-color: $sd-forms-disabled-color;
        box-shadow: 0 0 0 1px $sd-forms-disabled-outline inset;
    }

    &:disabled,
    option:disabled,
    &[disabled] > option {
        // If you want to change the color, make sure it works with the "inner label" text input too.
        color: $sd-forms-placeholder-text;

        // a11y fix: iOS Safari reduces disabled inputs to opacity 0.4, making text difficult to read
        opacity: 1;
        -webkit-text-fill-color: $sd-forms-placeholder-text;
    }
}

/* Select fields
   ========================================================================== */

.sd-form-select {
    padding-right: 48px;
    background-size: 17px auto;
    // $gray8 ic_chevrondown
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDE3IDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMS4xMjYyNCAwLjYyNjIwNkMxLjUxNjc2IDAuMjM1NjgyIDIuMTQ5OTMgMC4yMzU2ODIgMi41NDA0NSAwLjYyNjIwNkw4LjUwMDAxIDYuNTg1NzdMMTQuNDU5NiAwLjYyNjIwNkMxNC44NTAxIDAuMjM1NjgyIDE1LjQ4MzMgMC4yMzU2ODIgMTUuODczOCAwLjYyNjIwNkMxNi4yNjQzIDEuMDE2NzMgMTYuMjY0MyAxLjY0OTkgMTUuODczOCAyLjA0MDQyTDkuMjA3MTIgOC43MDcwOUM4LjgxNjU5IDkuMDk3NjEgOC4xODM0MyA5LjA5NzYxIDcuNzkyOSA4LjcwNzA5TDEuMTI2MjQgMi4wNDA0MkMwLjczNTcxMiAxLjY0OTkgMC43MzU3MTIgMS4wMTY3MyAxLjEyNjI0IDAuNjI2MjA2WiIgZmlsbD0iIzMzMzQzNSIvPgo8L3N2Zz4K);
    &:invalid {
        color: $sd-forms-placeholder-text;
    }
}

.select-placeholder {
    display: none;
}

.mod-label-inside {
    .sd-form-select {
        padding-top: 21px;
        padding-bottom: 5px;
        + .sd-form-label {
            top: 5px;
            font-size: $sd-mini-text;
            font-weight: $sd-font-weight-bold;
        }
    }
}

/* Radio buttons and checkboxes
   ========================================================================== */

// TODO: remove the input type selectors as soon as we deprecate old form styles.
// we should only apply styles to the class.
input[type='checkbox'].sd-form-checkbox,
input[type='radio'].sd-form-radio {
    // the following code helps screen reader's focus outline appear
    // start
    position: absolute;
    border: 0;
    padding: 0;
    margin: 1px 0 0 1px;
    height: $sd-radio-check-size;
    width: $sd-radio-check-size;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    // end
    + .sd-form-label {
        margin: 0 0 16px;
        text-indent: -28px;
        padding-left: 28px;
        font-size: $sd-base-text;
    }
    + .sd-form-label::before {
        display: inline-block;
        width: $sd-radio-check-size;
        height: $sd-radio-check-size;
        margin: 0 9px -3px 1px;
        content: ' ';
        background: $white;
        box-shadow: 0 0 0 1px $sd-forms-input-outline;
        border-radius: 100%;
        cursor: pointer;
    }
    &.mod-invalid {
        + .sd-form-label + .sd-form-error-msg {
            display: block;
            margin: -12px 0 16px;
        }
        + .sd-form-label::before {
            box-shadow: 0 0 0 1px $sd-forms-error-color;
        }
        + .sd-form-label:hover::before {
            box-shadow: inset 0 0 0 1px $sd-forms-error-color, 0 0 0 1px $sd-forms-error-color;
        }
        &:focus + .sd-form-label::before {
            box-shadow: inset 0 0 0 1px $sd-forms-error-color, 0 0 0 2px white, 0 0 0 4px $sd-forms-focus-color;
        }
        &:checked + .sd-form-label::before {
            box-shadow: inset 0 0 0 1px $sd-forms-check-radio-color, 0 0 0 1px $sd-forms-check-radio-color;
        }
        &:focus:hover + .sd-form-label::before {
            box-shadow: inset 0 0 0 2px $sd-forms-error-color, 0 0 0 2px white, 0 0 0 4px $sd-forms-focus-color;
        }
    }
    // unselected hover
    &:hover + .sd-form-label::before {
        box-shadow: inset 0 0 0 1px $sd-forms-check-radio-color, 0 0 0 1px $sd-forms-check-radio-color;
    }
    // unselected focus
    &:focus + .sd-form-label::before {
        box-shadow: inset 0 0 0 1px $sd-forms-input-outline, 0 0 0 2px white, 0 0 0 4px $sd-forms-focus-color;
    }
    //unselected hover/focus combo
    &:focus:hover + .sd-form-label::before {
        box-shadow: inset 0 0 0 2px $sd-forms-check-radio-color, 0 0 0 2px white, 0 0 0 4px $sd-forms-focus-color;
    }
    // selected default
    &:checked + .sd-form-label::before {
        box-sizing: border-box;
        border: 4px solid $white;
        background-color: $sd-forms-check-radio-color;
        box-shadow: 0 0 0 1px $sd-forms-check-radio-color;
    }
    // selected hover
    &:checked:hover + .sd-form-label::before {
        background-color: $sd-forms-hover-color;
        box-shadow: 0 0 0 1px $sd-forms-hover-color;
    }
    // selected focus
    &:checked:focus + .sd-form-label::before {
        box-shadow: 0 0 0 1px $sd-forms-active-color, 0 0 0 3px white, 0 0 0 5px $sd-forms-focus-color;
    }
    // selected focus/hover combo
    &:checked:focus:hover + .sd-form-label::before {
        box-shadow: 0 0 0 1px $sd-forms-hover-color, 0 0 0 3px white, 0 0 0 5px $sd-forms-focus-color;
    }

    &:disabled + .sd-form-label,
    &[readonly] + .sd-form-label {
        color: $sd-forms-filled-text; // TODO: remove this line when we deprecate old form styles

        &::before,
        &:hover::before {
            background-color: $sd-forms-disabled-color !important;
            box-shadow: 0 0 0 1px $sd-forms-disabled-outline;
            cursor: default;
        }
    }
    &:checked:disabled + .sd-form-label::before {
        box-shadow: 0 0 0 1px $sd-forms-forced-state;
        background-color: $sd-forms-forced-state !important;
    }
}
input[type='checkbox'].sd-form-checkbox {
    + .sd-form-label::before {
        border-radius: $sd-base-border-radius;
    }
    &:checked + .sd-form-label::before {
        border: none;
        // white checkmark icon
        background: $sd-forms-check-radio-color
            url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUuMiA5LjRhMSAxIDAgMCAxLS44LS4zTDEuMiA1LjhhMSAxIDAgMCAxIDEuNS0xLjVsMi41IDIuNUwxMSAxYTEgMSAwIDEgMSAxLjUgMS41TDYgOS4xYTEgMSAwIDAgMS0uOC4zeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==)
            no-repeat center center;
    }
}

/* Date fields
   ========================================================================== */

// This fixes a bug with iOS browsers (tested Safari & Chrome) where the date is center aligned.
// We want it left aligned by default.
input[type='date'],
input[type='datetime-local'] {
    &::-webkit-date-and-time-value {
        text-align: left;
    }
}