/*------------------------------------*\
    #TOGGLE
\*------------------------------------*/

/**
 * A generic SVG-based toggle. Uses the "is-active" class to swap layers.
 **/

 // Disable all variations by default so unneeded items are not included.

$sagovau-enable-toggle--brand: false !default;
$sagovau-enable-toggle--brand-light: false !default;





// Remove default button styling

/*a, button*/.#{$sagovau-namespace}toggle {
    background-color: transparent;
    border: 0;
    display: inline-block;
    padding: 0;
    vertical-align: middle;
}

    /**
     * 1. Prevent unwanted spacing
     *
     * 2. Make the active layer transparent if the toggle isn't active
     *
     * 3. Swap opacity when the toggle is active to display the correct
     *    layer(s)
     *
     * 4. Prevent the contents of the button from being repositioned when pressed in IE
     **/

    /*svg*/.#{$sagovau-namespace}toggle__icon {
        left: 0;          /* [4] */
        position: relative;   /* [4] */
        top: 0;          /* [4] */
        vertical-align: top;        /* [1] */
    }


        /*g, path*/.#{$sagovau-namespace}toggle__layer {

            // Selectively apply transitions

            .#{$sagovau-namespace}toggle--smooth & {
                transition: opacity $sagovau-transition-time;
            }

            // Change the appearance of the layer based on the state of the
            // toggle

            .#{$sagovau-namespace}toggle.is-active & {
                opacity: 0;  /* [3] */
            }

        }

        /*path*/.#{$sagovau-namespace}toggle__layer--active {
            opacity: 0;  /* [2] */

            // Change the appearance of the layer based on the state of the
            // toggle

            .#{$sagovau-namespace}toggle.is-active & {
                opacity: 1;  /* [3] */
            }

        }


// Colour variations

@if $sagovau-enable-toggle--brand == true {

    /*a, button*/.#{$sagovau-namespace}toggle--brand {
        fill: $sagovau-color-brand;
    }

}


@if $sagovau-enable-toggle--brand-light == true {

    /*a, button*/.#{$sagovau-namespace}toggle--brand-light {
        fill: $sagovau-color-brand--light;
    }

}