// Form Component
//
// A colette form should have `form` class to benefit every features provided
// This class can be used for fake forms
//
// Styleguide: Forms.Form

.form
    position relative

    // Busy status
    //
    // You can apply an animated “waiting” status on a form (after submitting for example):
    // if you add the `aria-busy="true"` to the `<form>` tag, you will get a **Loading** animation over it.
    //
    // Markup: form-ariabusy.twig
    //
    // Styleguide: Forms.Form.Busy

    &[aria-busy=true]
        {loading}
        &:before
            z-index 6

        &:after
            content ''
            display block
            position absolute
            z-index 5
            left 0
            right 0
            bottom 0
            top 0
            background-color s('hsla(0, 0%, var(--light-max), .8)')

    // Form field
    //
    // **Form field** component provides styles for:
    // - Field `label`
    // - Valid / invalid fields status
    //
    // .form-field-success      - valid field format
    // .form-field-error        - invalid field format
    //
    // Weight: 1
    //
    // Markup: form-field.twig
    //
    // Styleguide: Forms.Field
    &-field
        // display a widget for form element that must be filled with text content
        // e.g. input[text|password|email|url]

        label
            display block
            font-weight bold

        &-error
            border-color var(--color-error) !important // @stylint ignore: must override default form elements border-color

        &-success
            border-color var(--color-success) !important // @stylint ignore: must override default form elements border-color

    // Form help
    //
    // **Form help** component provides styles for fields descriptions, with valid / invalid color indications.
    // It can be used in combination with **Form field** to highlight the valid / invalid status of their related fields.
    // <br />Note that you can also use **Alerts** component to handle success or error messages.
    //
    // .form-help-success      - help text for valid field format
    // .form-help-error        - help text for invalid field format
    //
    // Weight: 2
    //
    // Markup: form-help.twig
    //
    // Styleguide: Forms.Help
    &-help
        padding-top .3em
        color var(--color-secondary)
        font-size .88em
        font-style italic
        line-height 1.1

        &-error
            color var(--color-error)

        &-success
            color var(--color-success)

    // Form contextual link
    //
    // Provides style for a contextual link related to a specific piece of a form.
    //
    // Weight: 3
    //
    // Markup: form-link.twig
    //
    // Styleguide: Forms.Link
    &-link
        padding-top .15em
        color var(--color-links)
        font-size .85em
        background transparent