// ------------------------------
// edX Pattern Library: Components - Forms

// About: Contains base styling for forms

// #SETTINGS
// #GLOBAL
// #INPUT TEXT
// #INPUT RADIO/CHECKBOX
// ------------------------------


// ------------------------------
// IMPORTANT: This is meant for the modals in the discussion forum
// when doing updates on them we added the classes to make it compatible
// with the pattern library. So, it is modified and scoped to that modal.

// TODO: Remove this file once the pattern library it implemented.
// ------------------------------
.wmd-prompt-dialog {
    // ----------------------------
    // #SETTINGS
    // ----------------------------
    $spacing-vertical-x-small:                  ($baseline/2);
    $spacing-vertical-base:                     ($baseline*2);
    $spacing-vertical-mid-small:                ($baseline*1.5);
    $spacing-vertical-small:                    $baseline;

    $font-size-large:                           18px;
    $font-size-base:                            16px;
    $font-size-small:                           14px;

    $component-border-radius:                   3px !default;

    $error-base:                                rgb(178, 6, 16);
    $error-dark:                                rgb(125, 9, 16);
    $grayscale-x-dark:                          rgb(77, 75, 75);
    $grayscale-x-light:                         rgb(231, 230, 230);
    $grayscale-white:                           rgb(252, 252, 252);
    $grayscale-cool-x-dark:                     rgb(52, 56, 58);
    $grayscale-cool-x-light:                    rgb(229, 233, 235);
    $primary-accent:                            rgb(14, 166, 236);
    $transparent:                               rgba(167, 164, 164, 0.498039);

    $text-base-color:                           $grayscale-x-dark !default;
    $label-color:                               $text-base-color !default;
    $label-color-active:                        $grayscale-x-dark !default;
    $input-placeholder-text:                    $grayscale-cool-x-light !default;
    $input-default-background:                  $grayscale-white !default;
    $input-default-border-color:                $grayscale-x-light !default;
    $input-default-focus-border-color:          $primary-accent !default;
    $input-default-color:                       $grayscale-cool-x-dark !default;
    $input-default-focus-color:                 $grayscale-cool-x-dark !default;
    $input-alt-background:                      $transparent !default;
    $input-alt-focus-border-color:              $grayscale-x-dark !default;


    // ----------------------------
    // #GLOBAL
    // ----------------------------
    // sections of a form
    .form-group {
        margin-bottom: $spacing-vertical-mid-small;

        // section title or legend
        .form-group-hd {
            margin-bottom: $spacing-vertical-small;
            font-size: $font-size-large;
        }

        .field {
            margin-bottom: $spacing-vertical-base;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    // radio button and checkbox fieldsets
    .field-group {
        margin-bottom: $spacing-vertical-small;

        // group title or legend
        .field-group-hd {
            margin-bottom: $spacing-vertical-small;
            font-size: $font-size-large;
        }

        .field {
            margin-bottom: $spacing-vertical-x-small;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .field-label {
        display: block;
        width: auto;
        margin-bottom: $spacing-vertical-x-small;
        font-size: $font-size-base;
        line-height: 100%;
        color: $label-color;

        // presents the label inline with the form control
        &.label-inline {
            display: inline-block;
            margin-bottom: 0;
        }

        // STATE: is selected
        .field-input:checked + .field-input-label,
        .field-radio:checked + .field-input-label,
        &.is-active,
        &.is-selected {
            color: $label-color-active;
        }
    }

    .field-message {
        font-size: $font-size-small;
        border-bottom-left-radius: $component-border-radius;
        border-bottom-right-radius: $component-border-radius;

        &.has-error {
            padding: $spacing-vertical-x-small;
            background: $error-base;
            color: $grayscale-white;
        }
    }

    .field-input,
    .field-select,
    .field-textarea {
        display: inline-block;
        padding: rem($baseline/2);
        border: 1px solid $input-default-border-color;
        background: $input-default-background;
        font-size: $font-size-base;
        color: $input-default-color;

        // STATE: is active or has focus
        &:focus,
        &.is-active {
            border-color: $input-default-focus-border-color;
            color: $input-default-focus-color;
        }

        // STATE: has an error
        &.has-error {
            border-color: $error-base;

            & + .field-hint {
                color: $error-dark;
            }

            .icon {
                fill: $error-base;
            }
        }
    }


    // ----------------------------
    // #INPUT TEXT
    // ----------------------------
    .input-text {

        &.input-alt {
            padding: $spacing-vertical-small 0;
            border-width: 0 0 2px 0;
            background: $input-alt-background;

            // STATE: is active or has focus
            &:focus,
            &.is-active {
                border-color: $input-alt-focus-border-color;
                background: $input-alt-background;
            }

            &.has-error {
                border-width: 1px 1px 2px 1px;
                border-color: $error-base;
            }
        }
    }

    // ----------------------------
    // Buttons
    // ----------------------------
    .form-btn {
        display: inline-block;
        margin: 10px;
        border-style: solid;
        border-radius: $component-border-radius;
        border-width: 1px;
        padding: $spacing-vertical-x-small $baseline;
        font-size: $font-size-base;
        font-weight: 600;
    }
}
