/**
 * PlatypusUI v0.16.9 (https://platypi.io) 
 * Copyright 2015 Platypi, LLC. All rights reserved. 
 * 
 * PlatypusUI is licensed under the MIT license found at  
 * https://github.com/Platypi/platypusui/blob/master/LICENSE
 * 
 */
/// ======= Global Variables ======== ///

#platui {
    #variables {
        /// ============= Global Colors ============== ///

        /// Brand Colors

        @primary-color: @blue;
        @secondary-color: @purple;

        /// State/Action Colors

        @success-color: @green;
        @danger-color: @red;
        @caution-color: @yellow;
        @neutral-color: @grey;

        /// ========= Default Color Palette ========== ///

        /// Red
        @pale-red: #e6b3b3;
        @red: #ef716f;
        @red-offset: #dd4d4e;

        /// Blue
        @pale-blue: #b3dbe6;
        @blue: #2d97d2;
        @blue-offset: #2d88be;

        /// Green
        @pale-green: #b3e6bf;
        @green: #53c670;
        @green-offset: #3ea357;

        /// Yellow
        @pale-yellow: #e6dcb3;
        @yellow: #e2c95a;
        @yellow-offset: #d2b537;

        /// Brown
        @pale-brown: #e6c9b3;
        @brown: #bf7740;
        @tan: #e09e6c;

        /// Orange
        @orange: #f0862c;

        /// Purple
        @purple: #A283A5;

        /// Greyscale
        @pale-grey: #edecec;
        @grey: #c8c7cd;
        @black: #000000;
        @white: #ffffff;
        @transparent: transparent;

        /// =============== Typography ================ ///

        @default-font-size: 16px;
        @default-font-type: @font-sans-serif;
        @default-font-color: #444444;
        @font-sans-serif: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        @font-serif: Georgia, "Times New Roman", Times, serif;
        @font-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;

        /// Mixin Vars

        @webkit: -webkit-;
        @moz: -moz-;
        @ms: -ms-;
        @khtml: -khtml-;
        @vanilla: -;

        @webkit-list: @webkit, @vanilla;
        @ms-list: @ms, @vanilla;
        @moz-list: @moz, @vanilla;
        @webkit-moz-list: @webkit, @moz, @vanilla;
        @webkit-moz-strict: @webkit, @moz;
        @webkit-moz-ms-list: @webkit, @moz, @ms, @vanilla;
        @webkit-moz-ms-strict: @webkit, @moz, @ms;
        @all-list: @webkit, @moz, @ms, @khtml, @vanilla;

        /// =============== Animations ================ ///

        @fade-in: FADE_IN;
        @fade-out: FADE_OUT;
        @slide-in: SLIDE_IN;
        @slide-out: SLIDE_OUT;
        @slide-in-fade-in: SLIDE_IN_FADE_IN;
        @slide-out-fade-out: SLIDE_OUT_FADE_OUT;

        /// ============== Various Sizes ============== ///

        @global-border-radius: 2px;
        @global-indicator-diameter: 1.2em;
        @global-touch-diameter: 1.5em;
        @global-max-z-index: 999999;
        @global-hidden-left: -99999px;

        /// ========= Responsive Breakpoints ========= ///

        /// Currently used in the grid system and in Typography

        /// Phone Breakpoint
        @phone-alias: phn;
        @phone-start: 0px;
        @phone-end: 499px;

        /// Phablet Breakpoint
        @phablet-alias: phb;
        @phablet-start: 500px;
        @phablet-end: 699px;

        /// Tablet Breakpoint
        @tablet-alias: tab;
        @tablet-start: 700px;
        @tablet-end: 899px;

        /// Desktop Breakpoint
        @desktop-alias: dsk;
        @desktop-start: 900px;
        @desktop-end: 1099px;

        /// HD Breakpoint
        @hd-alias: hd;
        @hd-start: 1100px;
        @hd-end: 1299px;

        /// XHD Breakpoint
        @xhd-alias: xhd;
        @xhd-start: 1300px;
    }
}

/// ======= Globally-Used Animations ======== ///

#platui {
    /// Animation Creation

    #animations {
        #platui > #variables;

        .keyframes(@name) {
            #platui > #variables;
            @-webkit-keyframes @name {
                .frames(@webkit);
            }

            @-moz-keyframes @name {
                .frames(@moz);
            }

            @keyframes @name {
                .frames(@vanilla);
            }
        }

        .fade(@name: @fade-out; @direction: out) {
            .keyframes(@name);
            .frames(@prefix) {
                & when (@direction = in) {
                    from {
                        opacity: 0;
                    }
                    to {
                        opacity: 1;
                    }
                } & when (@direction = out) {
                    from {
                        opacity: 1;
                    }
                    to {
                        opacity: 0;
                    }
                }
            }
        }

        .slide(@name: @slide-in; @direction: in; @from: right) {
            .keyframes(@name);
            .frames(@prefix) {
                & when (@direction = in) {
                    & when (@from = left) {
                        from {
                            left: -100%;
                        }
                    } & when (@from = right) {
                        from {
                            left: 100%;
                        }
                    }
                } & when (@direction = out) {
                    & when (@from = left) {
                        to {
                            left: -100%;
                        }
                    } & when (@from = right) {
                        to {
                            left: 100%;
                        }
                    }
                }
            }
        }

        .slideAndFade(@name: @slide-in-fade-in; @direction: in; @from-to: right) {
            .keyframes(@name);
            .frames(@prefix) {
                & when (@direction = in) {
                    & when (@from-to = left) {
                        0% {
                            left: -100%;
                            opacity: 0;
                        }
                    } & when (@from-to = right) {
                        0% {
                            left: 100%;
                            opacity: 0;
                        }
                    }
                    25% {
                        opacity: 0.1;
                    }
                    50% {
                        opacity: 0.2;
                    }
                    75% {
                        opacity: 0.3;
                    }
                    100% {
                        opacity: 1;
                    }
                } & when (@direction = out) {
                    0% {
                        opacity: 1;
                    }
                    25% {
                        opacity: 0.3;
                    }
                    50% {
                        opacity: 0.2;
                    }
                    75% {
                        opacity: 0.1;
                    } & when (@from-to = left) {
                        100% {
                            left: -100%;
                            opacity: 0;
                        }
                    } & when (@from-to = right) {
                        100% {
                            left: 100%;
                            opacity: 0;
                        }
                    }
                }
            }
        }
    }
}

/// ======= Mixins ======== ///

#platui {
    #__mixins {
        /// Helper Methods

        .looper(@property; @value; @list; @counter) when (@counter > 0) {
            .looper(@property; @value; @list; (@counter - 1));
            @extraction: extract(@list, @counter);
            @{extraction}@{property}: @value;
        }

        .value-looper(@property; @valuePropety; @value; @list; @counter) when (@counter = length(@list)) and (extract(@list, @counter) = @vanilla) {
            .value-looper(@property; @valuePropety; @value; @list; (@counter - 1));
            @{property}: ~'@{valuePropety}(@{value})';
        }
        .value-looper(@property; @valuePropety; @value; @list; @counter) when (@counter = 1) and not(extract(@list, @counter) = @vanilla) {
            @extraction: extract(@list, @counter);
            @{property}: ~'@{extraction}@{valuePropety}(@{value})';
        }
        .value-looper(@property; @valuePropety; @value; @list; @counter) when (@counter = 0) { }
        .value-looper(@property; @valuePropety; @value; @list; @counter) when (default()) {
            .value-looper(@property; @valuePropety; @value; @list; (@counter - 1));
            @extraction: extract(@list, @counter);
            @{property}: ~'@{extraction}@{valuePropety}(@{value})';
        }

        .vendor-loop(@property; @value; @list) when (length(@list) > 1) {
            .looper(@property; @value; @list; length(@list) - 1);
            @{property}: @value;
        }
        .vendor-loop(@property; @value; @list) when (length(@list) = 1) and not(@list = @vanilla) {
            @{list}@{property}: @value;
        }
        .vendor-loop(@property; @value; @list) when (default())  {
            @{property}: @value;
        }
    }
}

#platui {
    #mixins {
        /// Frequently used

        .calc(@prop; @val) {
          @{prop}: -webkit-calc(~'@{val}');
          @{prop}: calc(~'@{val}');
        }

        .fill() {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        /// Border Radius

        .border-radius(@radius) {
            #platui > #variables;
            .border-radius(@radius; @webkit-list);
        }
        .border-radius(@radius; @vendor-list) {
            #platui > #__mixins;
            .vendor-loop(border-top-left-radius; @radius; @vendor-list);
            .vendor-loop(border-top-right-radius; @radius; @vendor-list);
            .vendor-loop(border-bottom-left-radius; @radius; @vendor-list);
            .vendor-loop(border-bottom-right-radius; @radius; @vendor-list);
        }

        .border-top-left-radius(@radius) {
            #platui > #variables;
            .border-top-left-radius(@radius; @webkit-list);
        }
        .border-top-left-radius(@radius; @vendor-list) {
            #platui > #__mixins > .vendor-loop(border-top-left-radius; @radius; @vendor-list);
        }

        .border-top-right-radius(@radius) {
            #platui > #variables;
            .border-top-right-radius(@radius; @webkit-list);
        }
        .border-top-right-radius(@radius; @vendor-list) {
            #platui > #__mixins > .vendor-loop(border-top-right-radius; @radius; @vendor-list);
        }

        .border-bottom-left-radius(@radius) {
            #platui > #variables;
            .border-bottom-left-radius(@radius; @webkit-list);
        }
        .border-bottom-left-radius(@radius; @vendor-list) {
            #platui > #__mixins > .vendor-loop(border-bottom-left-radius; @radius; @vendor-list);
        }

        .border-bottom-right-radius(@radius) {
            #platui > #variables;
            .border-bottom-right-radius(@radius; @webkit-list);
        }
        .border-bottom-right-radius(@radius; @vendor-list) {
            #platui > #__mixins > .vendor-loop(border-bottom-right-radius; @radius; @vendor-list);
        }

        /// Background Clip

        .background-clip(@box) when (@box = border-box), (@box = border) {
            -moz-background-clip: border;
            -webkit-background-clip: border;
            background-clip: border-box;
        }
        .background-clip(@box) when (@box = padding-box), (@box = padding) {
            -moz-background-clip: padding;
            -webkit-background-clip: padding;
            background-clip: padding-box;
        }
        .background-clip(@box) when (@box = content-box), (@box = content) {
            -moz-background-clip: content;
            -webkit-background-clip: content;
            background-clip: content-box;
        }
        .background-clip(@box) when (default()) {
            -moz-background-clip: @box;
            -webkit-background-clip: @box;
            background-clip: @box;
        }

        /// Box Shadows

        .box-shadow(@args) {
            #platui > #variables;
            .box-shadow(@args; @webkit-list);
        }
        .box-shadow(@args; @vendor-list) {
            #platui > #__mixins > .vendor-loop(box-shadow; @args; @vendor-list);
        }

        /// Box Sizing

        .box-sizing(@args: border-box) {
            #platui > #variables;
            .box-sizing(@args; @webkit-moz-list);
        }
        .box-sizing(@args; @vendor-list) {
            #platui > #__mixins > .vendor-loop(box-sizing; @args; @vendor-list);
        }

        /// Appearance
        // only common values are none, button, checkbox, scrollbarbutton-up

        .appearance(@args: none) {
            #platui > #variables;
            .appearance(@args; @webkit-moz-list);
        }
        .appearance(@args; @vendor-list) {
            #platui > #__mixins > .vendor-loop(appearance; @args; @vendor-list);
        }

        /// Backface Visibility

        .backface-visibility(@arg: visible) {
            #platui > #variables;
            .backface-visibility(@arg; @webkit-list);
        }
        .backface-visibility(@arg; @vendor-list) {
            #platui > #__mixins > .vendor-loop(backface-visibility; @arg; @vendor-list);
        }
    }
}

#platui {
    #media {
    /// ======= Globally-Used Media Query Mixins ======== ///

        .media(@type; @condition1; @condition2; @condition3; @condition4; @rules) {
            @media @type and (@condition1) and (@condition2) and (@condition3) and (@condition4) {
                @rules();
            }
        }

        .media(@type; @condition1; @condition2; @condition3; @rules) {
            @media @type and (@condition1) and (@condition2) and (@condition3) {
                @rules();
            }
        }

        .media(@type; @condition1; @condition2; @rules) {
            @media @type and (@condition1) and (@condition2) {
                @rules();
            }
        }

        .media(@type; @condition1; @rules) {
            @media @type and (@condition1) {
                @rules();
            }
        }

        .width(@min-width: undefined; @max-width: undefined; @rules) {
            & when not(@max-width = 0px) and not(@max-width = 0) and not(@max-width = undefined) and not(@max-width = null) {
                & when not(@min-width = 0px) and not(@min-width = 0) and not(@min-width = undefined) and not(@min-width = null) {
                    #platui > #media > .media(all; ~'min-width: @{min-width}'; ~'max-width: @{max-width}'; @rules);
                } & when (@min-width = 0px), (@min-width = 0), (@min-width = undefined), (@min-width = null) {
                    #platui > #media > .media(all; ~'max-width: @{max-width}'; @rules);
                }
            } & when (@max-width = 0px), (@max-width = 0), (@max-width = undefined), (@max-width = null) {
                & when not(@min-width = 0px) and not(@min-width = 0) and not(@min-width = undefined) and not(@min-width = null) {
                    #platui > #media > .media(all; ~'min-width: @{min-width}'; @rules);
                } & when (@min-width = 0px), (@min-width = 0), (@min-width = undefined), (@min-width = null) {
                    /** #platui > #media > .width mixin had no min-width or max-width defined  **/
                }
            }
        }

        .min-width(@min-width; @rules) {
            #platui > #media > .media(all; ~'min-width: @{min-width}'; @rules);
        }

        .max-width(@max-width; @rules) {
            #platui > #media > .media(all; ~'max-width: @{max-width}'; @rules);
        }

        .height(@min-height: undefined; @max-height: undefined; @rules) {
            & when not(@max-height = 0px) and not(@max-height = 0) and not(@max-height = undefined) and not(@max-height = null) {
                & when not(@min-height = 0px) and not(@min-height = 0) and not(@min-height = undefined) and not(@min-height = null) {
                    #platui > #media > .media(all; ~'min-height: @{min-height}'; ~'max-height: @{max-height}'; @rules);
                } & when (@min-height = 0px), (@min-height = 0), (@min-height = undefined), (@min-height = null) {
                    #platui > #media > .media(all; ~'max-height: @{max-height}'; @rules);
                }
            } & when (@max-height = 0px), (@max-height = 0), (@max-height = undefined), (@max-height = null) {
                & when not(@min-height = 0px) and not(@min-height = 0) and not(@min-height = undefined) and not(@min-height = null) {
                    #platui > #media > .media(all; ~'min-height: @{min-height}'; @rules);
                } & when (@min-height = 0px), (@min-height = 0), (@min-height = undefined), (@min-height = null) {
                    /** #platui > #media > .height mixin had no min-height or max-height defined  **/
                }
            }
        }

        .min-height(@min-height; @rules) {
            #platui > #media > .media(all; ~'min-height: @{min-height}'; @rules);
        }

        .max-height(@max-height; @rules) {
            #platui > #media > .media(all; ~'max-height: @{max-height}'; @rules);
        }

        .phone-max(@rules) {
            #platui > #variables;
            #platui > #media > .width(@max-width: @phone-end; @rules: @rules);
        }

        .phn-max(@rules) {
            #platui > #variables;
            #platui > #media > .width(@max-width: @phone-end; @rules: @rules);
        }

        .phablet(@rules) {
            #platui > #variables;
            #platui > #media > .width(@phablet-start; @rules: @rules);
        }

        .phablet-max(@rules) {
            #platui > #variables;
            #platui > #media > .width(@max-width: @phablet-end; @rules: @rules);
        }

        .phablet-only(@rules) {
            #platui > #variables;
            #platui > #media > .width(@phablet-start; @phablet-end; @rules);
        }

        .phb(@rules) {
            #platui > #variables;
            #platui > #media > .width(@phablet-start; @rules: @rules);
        }

        .phb-max(@rules) {
            #platui > #variables;
            #platui > #media > .width(@max-width: @phablet-end; @rules: @rules);
        }

        .phb-only(@rules) {
            #platui > #variables;
            #platui > #media > .width(@phablet-start; @phablet-end; @rules);
        }

        .tablet(@rules) {
            #platui > #variables;
            #platui > #media > .width(@tablet-start; @rules: @rules);
        }

        .tablet-max(@rules) {
            #platui > #variables;
            #platui > #media > .width(@max-width: @tablet-end; @rules: @rules);
        }

        .tablet-only(@rules) {
            #platui > #variables;
            #platui > #media > .width(@tablet-start; @tablet-end; @rules);
        }

        .tab(@rules) {
            #platui > #variables;
            #platui > #media > .width(@tablet-start; @rules: @rules);
        }

        .tab-max(@rules) {
            #platui > #variables;
            #platui > #media > .width(@max-width: @tablet-end; @rules: @rules);
        }

        .tab-only(@rules) {
            #platui > #variables;
            #platui > #media > .width(@tablet-start; @tablet-end; @rules);
        }

        .desktop(@rules) {
            #platui > #variables;
            #platui > #media > .width(@desktop-start; @rules: @rules);
        }

        .desktop-max(@rules) {
            #platui > #variables;
            #platui > #media > .width(@max-width: @desktop-end; @rules: @rules);
        }

        .desktop-only(@rules) {
            #platui > #variables;
            #platui > #media > .width(@desktop-start; @desktop-end; @rules);
        }

        .dsk(@rules) {
            #platui > #variables;
            #platui > #media > .width(@desktop-start; @rules: @rules);
        }

        .dsk-max(@rules) {
            #platui > #variables;
            #platui > #media > .width(@max-width: @desktop-end; @rules: @rules);
        }

        .dsk-only(@rules) {
            #platui > #variables;
            #platui > #media > .width(@desktop-start; @desktop-end; @rules);
        }

        .hd(@rules) {
            #platui > #variables;
            #platui > #media > .width(@hd-start; @rules: @rules);
        }

        .hd-max(@rules) {
            #platui > #variables;
            #platui > #media > .width(@max-width: @hd-end; @rules: @rules);
        }

        .hd-only(@rules) {
            #platui > #variables;
            #platui > #media > .width(@hd-start; @hd-end; @rules);
        }

        .xhd(@rules) {
            #platui > #variables;
            #platui > #media > .width(@xhd-start; @rules: @rules);
        }

        .media-width(@minWidth: undefined; @maxWidth: undefined; @rules) {
            & when not(@maxWidth = 0px) and not(@maxWidth = 0) and not(@maxWidth = undefined) and not(@maxWidth = null) {
                & when not(@minWidth = 0px) and not(@minWidth = 0) and not(@minWidth = undefined) and not(@minWidth = null) {
                    #platui > #media > .media(all; ~'min-width: @{minWidth}'; ~'max-width: @{maxWidth}'; @rules);
                } & when (@minWidth = 0px), (@minWidth = 0), (@minWidth = undefined), (@minWidth = null) {
                    #platui > #media > .media(all; ~'max-width: @{maxWidth}'; @rules);
                }
            } & when (@maxWidth = 0px), (@maxWidth = 0), (@maxWidth = undefined), (@maxWidth = null) {
                & when not(@minWidth = 0px) and not(@minWidth = 0) and not(@minWidth = undefined) and not(@minWidth = null) {
                    #platui > #media > .media(all; ~'min-width: @{minWidth}'; @rules);
                } & when (@minWidth = 0px), (@minWidth = 0), (@minWidth = undefined), (@minWidth = null) {
                    /** #platui > #media > .media-width mixin had no min-width or max-width defined  **/
                }
            }
        }

        .media-height(@minHeight: undefined; @maxHeight: undefined; @rules) {
            & when not(@maxHeight = 0px) and not(@maxHeight = 0) and not(@maxHeight = undefined) and not(@maxHeight = null) {
                & when not(@minHeight = 0px) and not(@minHeight = 0) and not(@minHeight = undefined) and not(@minHeight = null) {
                    #platui > #media > .media(all; ~'min-height: @{minHeight}'; ~'max-height: @{maxHeight}'; @rules);
                } & when (@minHeight = 0px), (@minHeight = 0), (@minHeight = undefined), (@minHeight = null) {
                    #platui > #media > .media(all; ~'max-height: @{maxHeight}'; @rules);
                }
            } & when (@maxHeight = 0px), (@maxHeight = 0), (@maxHeight = undefined), (@maxHeight = null) {
                & when not(@minHeight = 0px) and not(@minHeight = 0) and not(@minHeight = undefined) and not(@minHeight = null) {
                    #platui > #media > .media(all; ~'min-height: @{minHeight}'; @rules);
                } & when (@minHeight = 0px), (@minHeight = 0), (@minHeight = undefined), (@minHeight = null) {
                    /**  #platui > #media > .media-height mixin had no min-height or max-height defined  **/
                }
            }
        }

        .media-phone-max(@rules) {
            #platui > #variables;
            #platui > #media > .media-width(@maxWidth: @phone-end; @rules: @rules);
        }

        .media-phablet(@rules) {
            #platui > #variables;
            #platui > #media > .media-width(@phablet-start; @rules: @rules);
        }

        .media-phablet-max(@rules) {
            #platui > #variables;
            #platui > #media > .media-width(@maxWidth: @phablet-end; @rules: @rules);
        }

        .media-phablet-only(@rules) {
            #platui > #variables;
            #platui > #media > .media-width(@phablet-start; @phablet-end; @rules);
        }

        .media-tablet(@rules) {
            #platui > #variables;
            #platui > #media > .media-width(@tablet-start; @rules: @rules);
        }

        .media-tablet-max(@rules) {
            #platui > #variables;
            #platui > #media > .media-width(@maxWidth: @tablet-end; @rules: @rules);
        }

        .media-tablet-only(@rules) {
            #platui > #variables;
            #platui > #media > .media-width(@tablet-start; @tablet-end; @rules);
        }

        .media-desktop(@rules) {
            #platui > #variables;
            #platui > #media > .media-width(@desktop-start; @rules: @rules);
        }
    }
}

#platui {
    #mixins {
        .scroll() {
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }

        .scroll(@direction) {
            & when (@direction = x) {
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
            }
            & when not (@direction = x) {
                overflow-y: auto;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
            }
        }

        .scrollbar(@size; @foreground-color; @background-color; @border-radius: 0) {
            #platui > #mixins;
            .scrollbar-size(@size);
            .scrollbar-border-radius(@border-radius);
            .scrollbar-foreground-color(@foreground-color);
            .scrollbar-background-color(@background-color);
        }

        .scrollbar-size(@size) {
            ::-webkit-scrollbar {
                width: @size;
                height: @size;
            }
        }

        .scrollbar-border-radius(@radius) {
            ::-webkit-scrollbar-track,
            ::-webkit-scrollbar-thumb {
                #platui > #mixins > .border-radius(@radius);
            }
        }

        .scrollbar-foreground-color(@foreground-color) {
            scrollbar-face-color: @foreground-color;

            ::-webkit-scrollbar-thumb {
                background: @foreground-color;
            }
        }

        .scrollbar-background-color(@background-color) {
            scrollbar-track-color: @background-color;

            ::-webkit-scrollbar-track {
                background: @background-color;
            }
        }
	}
}

#platui {
    #mixins {
        /// Touch

        .touch-action(@behavior: manipulation) {
            #platui > #variables;
            #platui > #__mixins > .vendor-loop(touch-action; @behavior; @ms-list);
        }

        .user-select(@behavior: all) {
            #platui > #variables;
            .user-select(@behavior; @all-list);
        }
        .user-select(@behavior; @vendor-list) {
            #platui > #__mixins > .vendor-loop(user-select; @behavior; @vendor-list);
        }

        .webkit-touch-additions(@callout: none; @highlight: transparent) {
            -webkit-touch-callout: @callout;
            -webkit-tap-highlight-color: @highlight;
        }

        .misc-webkit-touch(@callout: none; @drag: none; @highlight: transparent; @overflowscroll: touch) {
            .webkit-touch-additions(@callout; @highlight);
            -webkit-user-drag: @drag;
            -webkit-overflow-scrolling: @overflowscroll;
        }
    }
}

#platui {
    #mixins {
        /// Animations

        .animate(@name; @duration: 200ms; @function: ease; @delay: 0s; @count: 1; @direction: normal; @fill-mode: none; @play-state: running) {
            #platui > #variables;
            .animate(@name; @duration; @function; @delay; @count; @direction; @fill-mode; @play-state; @webkit-moz-list);
        }
        .animate(@name; @duration; @function; @delay; @count; @direction; @fill-mode; @play-state: running; @vendor-list) {
            // need to call these separately due to iOS 9 animation issue
            .animation-name(@name; @vendor-list);
            .animation-duration(@duration; @vendor-list);
            .animation-timing-function(@function; @vendor-list);
            .animation-delay(@delay; @vendor-list);
            .animation-iteration-count(@count; @vendor-list);
            .animation-direction(@direction; @vendor-list);
            .animation-fill-mode(@fill-mode; @vendor-list);
            .animation-play-state(@play-state; @vendor-list);
        }

        .animation(@args) {
            #platui > #variables;
            .animation(@args; @webkit-moz-list);
        }
        .animation(@args; @vendor-list) {
            #platui > #__mixins > .vendor-loop(animation; @args; @vendor-list);
        }

        .animation-delay(@delay) {
            #platui > #variables;
            .animation-delay(@delay; @webkit-moz-list);
        }
        .animation-delay(@delay; @vendor-list) {
            #platui > #__mixins > .vendor-loop(animation-delay; @delay; @vendor-list);
        }

        .animation-direction(@direction) {
            #platui > #variables;
            .animation-direction(@direction; @webkit-moz-list);
        }
        .animation-direction(@direction; @vendor-list) {
            #platui > #__mixins > .vendor-loop(animation-direction; @direction; @vendor-list);
        }

        .animation-duration(@duration) {
            #platui > #variables;
            .animation-duration(@duration; @webkit-moz-list);
        }
        .animation-duration(@duration; @vendor-list) {
            #platui > #__mixins > .vendor-loop(animation-duration; @duration; @vendor-list);
        }

        .animation-fill-mode(@fill-mode) {
            #platui > #variables;
            .animation-fill-mode(@fill-mode; @webkit-moz-list);
        }
        .animation-fill-mode(@fill-mode; @vendor-list) {
            #platui > #__mixins > .vendor-loop(animation-fill-mode; @fill-mode; @vendor-list);
        }

        .animation-iteration-count(@count) {
            #platui > #variables;
            .animation-iteration-count(@count; @webkit-moz-list);
        }
        .animation-iteration-count(@count; @vendor-list) {
            #platui > #__mixins > .vendor-loop(animation-iteration-count; @count; @vendor-list);
        }

        .animation-name(@name) {
            #platui > #variables;
            .animation-name(@name; @webkit-moz-list);
        }
        .animation-name(@name; @vendor-list) {
            #platui > #__mixins > .vendor-loop(animation-name; @name; @vendor-list);
        }

        .animation-play-state(@state) {
            #platui > #variables;
            .animation-play-state(@state; @webkit-moz-list);
        }
        .animation-play-state(@state; @vendor-list) {
            #platui > #__mixins > .vendor-loop(animation-play-state; @state; @vendor-list);
        }

        .animation-timing-function(@function) {
            #platui > #variables;
            .animation-timing-function(@function; @webkit-moz-list);
        }
        .animation-timing-function(@function; @vendor-list) {
            #platui > #__mixins > .vendor-loop(animation-timing-function; @function; @vendor-list);
        }
    }
}

#platui {
    #mixins {
        /// Transforms

        .transform(@args) {
            #platui > #variables;
            .transform(@args; @webkit-moz-ms-list);
        }
        .transform(@args; @vendor-list) {
            #platui > #__mixins > .vendor-loop(transform; @args; @vendor-list);
        }

        .transform-origin(@origin) {
            #platui > #variables;
            .transform-origin(@origin; @webkit-moz-ms-list);
        }
        .transform-origin(@origin; @vendor-list) {
            #platui > #__mixins > .vendor-loop(transform-origin; @origin; @vendor-list);
        }

        .transform-style(@style) {
            #platui > #variables;
            .transform-style(@style; @webkit-moz-list);
        }
        .transform-style(@style; @vendor-list) {
            #platui > #__mixins > .vendor-loop(transform-style; @style; @vendor-list);
        }

        .matrix(@args) {
            .transform(matrix(@args));
        }
        .matrix(@args; @vendor-list) {
            .transform(matrix(@args); @vendor-list);
        }

        .matrix3d(@args) {
            .transform(matrix3d(@args));
        }
        .matrix3d(@args; @vendor-list) {
            .transform(matrix3d(@args); @vendor-list);
        }

        .rotate(@a) {
            .transform(rotate(@a));
        }
        .rotate(@a; @vendor-list) {
            .transform(rotate(@a); @vendor-list);
        }

        .rotateX(@a) {
            .transform(rotateX(@a));
        }
        .rotateX(@a; @vendor-list) {
            .transform(rotateX(@a); @vendor-list);
        }

        .rotateY(@a) {
            .transform(rotateY(@a));
        }
        .rotateY(@a; @vendor-list) {
            .transform(rotateY(@a); @vendor-list);
        }

        .rotateZ(@a) {
            .transform(rotateZ(@a));
        }
        .rotateZ(@a; @vendor-list) {
            .transform(rotateZ(@a); @vendor-list);
        }

        .rotate3d(@x; @y; @z; @a) {
            .transform(rotate3d(@x, @y, @z, @a));
        }
        .rotate3d(@x; @y; @z; @a; @vendor-list) {
            .transform(rotate3d(@x, @y, @z, @a); @vendor-list);
        }

        .scale(@factor) {
            .transform(scale(@factor));
        }
        .scale(@factor1; @factor2) {
            .transform(scale(@factor1, @factor2));
        }
        .scale(@factor1; @factor2; @vendor-list) {
            .transform(scale(@factor1, @factor2); @vendor-list);
        }

        .scaleX(@factor) {
            .transform(scaleX(@factor));
        }
        .scaleX(@factor; @vendor-list) {
            .transform(scaleX(@factor); @vendor-list);
        }

        .scaleY(@factor) {
            .transform(scaleY(@factor));
        }
        .scaleY(@factor; @vendor-list) {
            .transform(scaleY(@factor); @vendor-list);
        }

        .scaleZ(@factor) {
            .transform(scaleZ(@factor));
        }
        .scaleZ(@factor; @vendor-list) {
            .transform(scaleZ(@factor); @vendor-list);
        }

        .scale3d(@x; @y; @z) {
            .transform(scale3d(@x, @y, @z));
        }
        .scale3d(@x; @y; @z; @vendor-list) {
            .transform(scale3d(@x, @y, @z); @vendor-list);
        }

        .skew(@a) {
            .transform(skew(@a));
        }
        .skew(@a1; @a2) {
            .transform(skew(@a1, @a2));
        }
        .skew(@a1; @a2; @vendor-list) {
            .transform(skew(@a1, @a2); @vendor-list);
        }

        .skewX(@a) {
            .transform(skewX(@a));
        }
        .skewX(@a; @vendor-list) {
            .transform(skewX(@a); @vendor-list);
        }

        .skewY(@a) {
            .transform(skewY(@a));
        }
        .skewY(@a; @vendor-list) {
            .transform(skewY(@a); @vendor-list);
        }

        .perspective(@value: none) {
            #platui > #variables;
            .perspective(@value; @webkit-moz-ms-list);
        }
        .perspective(@value; @vendor-list) {
            #platui > #__mixins > .vendor-loop(perspective; @value; @vendor-list);
        }

        .translate(@x; @y) {
            .transform(translate(@x, @y));
        }
        .translate(@x; @y; @vendor-list) {
            .transform(translate(@x, @y); @vendor-list);
        }

        .translateX(@x) {
            .transform(translateX(@x));
        }
        .translateX(@x; @vendor-list) {
            .transform(translateX(@x); @vendor-list);
        }

        .translateY(@y) {
            .transform(translateY(@y));
        }
        .translateY(@y; @vendor-list) {
            .transform(translateY(@y); @vendor-list);
        }

        .translateZ(@z) {
            .transform(translateZ(@z));
        }
        .translateZ(@z; @vendor-list) {
            .transform(translateZ(@z); @vendor-list);
        }

        .translate3d(@x; @y; @z) {
            .transform(translate3d(@x, @y, @z));
        }
        .translate3d(@x; @y; @z; @vendor-list) {
            .transform(translate3d(@x, @y, @z); @vendor-list);
        }

        .translate-accelerate(@x; @y) {
            .translate(@x; @y);
            .transform(translate3d(@x, @y, 0));
        }
        .translate-accelerate(@x; @y; @vendor-list) {
            .translate(@x; @y; @vendor-list);
            .transform(translate3d(@x, @y, 0); @vendor-list);
        }
    }
}

#platui {
    #mixins {
        /// Transitions

        .transition(@args) {
            #platui > #variables;
            .transition(@args; @webkit-moz-list);
        }
        .transition(@args; @vendor-list) {
            #platui > #__mixins > .vendor-loop(transition; @args; @vendor-list);
        }

        .transition-all(@duration: 200ms; @function: ease; @delay: 0s) {
            #platui > #variables;
            .transition-all(@duration; @function; @delay; @webkit-moz-list);
        }
        .transition-all(@duration; @function; @delay; @vendor-list) {
            #platui > #__mixins > .vendor-loop(transition; all @duration @function @delay; @vendor-list);
        }

        .transition-delay(@delay) {
            #platui > #variables;
            .transition-delay(@delay; @webkit-moz-list);
        }
        .transition-delay(@delay; @vendor-list) {
            #platui > #__mixins > .vendor-loop(transition-delay; @delay; @vendor-list);
        }

        .transition-duration(@duration) {
            #platui > #variables;
            .transition-duration(@duration; @webkit-moz-list);
        }
        .transition-duration(@duration; @vendor-list) {
            #platui > #__mixins > .vendor-loop(transition-duration; @duration; @vendor-list);
        }

        .transition-property(@property: all) {
            #platui > #variables;
            .transition-property(@property; @webkit-moz-list);
        }
        .transition-property(@property; @vendor-list) {
            #platui > #__mixins > .vendor-loop(transition-property; @property; @vendor-list);
        }

        .transition-timing-function(@function: ease) {
            #platui > #variables;
            .transition-timing-function(@function; @webkit-moz-list);
        }
        .transition-timing-function(@function; @vendor-list) {
            #platui > #__mixins > .vendor-loop(transition-timing-function; @function; @vendor-list);
        }
    }
}

#platui {
    #mixins {
        /// Flexbox

        .flexbox() {
            display: -webkit-box;
	        display: -webkit-flex;
	        display: -moz-flex;
	        display: -ms-flexbox;
	        display: flex;
        }

        .inline-flexbox() {
            display: -webkit-inline-box;
	        display: -webkit-inline-flex;
	        display: -moz-inline-flex;
	        display: -ms-inline-flexbox;
	        display: inline-flex;
        }

        .flex(@values) {
            -webkit-box-flex: @values;
            -webkit-flex:  @values;
            -moz-box-flex:  @values;
            -moz-flex: @values;
            -ms-flex:  @values;
            flex:  @values;
        }

        .flex-direction(@direction) when (@direction = row-reverse) {
            -webkit-box-direction: reverse;
		    -webkit-box-orient: horizontal;
            -webkit-flex-direction: @direction;
	        -moz-flex-direction: @direction;
	        -ms-flex-direction: @direction;
	        flex-direction: @direction;
        }

        .flex-direction(@direction) when (@direction = column) {
            -webkit-box-direction: normal;
		    -webkit-box-orient: vertical;
            -webkit-flex-direction: @direction;
	        -moz-flex-direction: @direction;
	        -ms-flex-direction: @direction;
	        flex-direction: @direction;
        }

        .flex-direction(@direction) when (@direction = column-reverse) {
            -webkit-box-direction: reverse;
		    -webkit-box-orient: vertical;
            -webkit-flex-direction: @direction;
	        -moz-flex-direction: @direction;
	        -ms-flex-direction: @direction;
	        flex-direction: @direction;
        }

        .flex-direction(@direction) when (default()) {
            -webkit-box-direction: normal;
		    -webkit-box-orient: horizontal;
            -webkit-flex-direction: @direction;
	        -moz-flex-direction: @direction;
	        -ms-flex-direction: @direction;
	        flex-direction: @direction;
        }

        .align-items(@position) when (@position = flex-start) {
            -webkit-box-align: start;
            -webkit-align-items: @position;
            -moz-align-items: @position;
            -ms-flex-align: start;
            align-items: @position;
        }

        .align-items(@position) when (@position = flex-end) {
            -webkit-box-align: end;
            -webkit-align-items: @position;
            -moz-align-items: @position;
            -ms-flex-align: end;
            align-items: @position;
        }

        .align-items(@position) when (default()) {
            -webkit-box-align: @position;
            -webkit-align-items: @position;
            -moz-align-items: @position;
            -ms-flex-align: @position;
            align-items: @position;
        }

        .align-content(@position) when (@position = flex-start) {
            -webkit-align-content: @position;
            -moz-align-content: @position;
            -ms-flex-line-pack: start;
            align-content: @position;
        }

        .align-content(@position) when (@position = flex-end) {
            -webkit-align-content: @position;
            -moz-align-content: @position;
            -ms-flex-line-pack: end;
            align-content: @position;
        }

        .align-content(@position) when (default()) {
            -webkit-align-content: @position;
            -moz-align-content: @position;
            -ms-flex-line-pack: @position;
            align-content: @position;
        }

        .align-self(@position) when (@position = flex-start) {
            -webkit-align-self: @position;
            -moz-align-self: @position;
            -ms-flex-item-align: start;
            align-self: @position;
        }

        .align-self(@position) when (@position = flex-end) {
            -webkit-align-self: @position;
            -moz-align-self: @position;
            -ms-flex-item-align: end;
            align-self: @position;
        }

        .align-self(@position) when (default()) {
            -webkit-align-self: @position;
            -moz-align-self: @position;
            -ms-flex-item-align: @position;
            align-self: @position;
        }

        .justify-content(@position) when (@position = flex-start) {
		    -webkit-box-pack: start;
            -webkit-justify-content: @position;
            -moz-justify-content: @position;
		    -ms-flex-pack: start;
            justify-content: @position;
        }

        .justify-content(@position) when (@position = flex-end) {
		    -webkit-box-pack: end;
            -webkit-justify-content: @position;
            -moz-justify-content: @position;
		    -ms-flex-pack: end;
            justify-content: @position;
        }

        .justify-content(@position) when (@position = space-around) {
            -webkit-justify-content: @position;
            -moz-justify-content: @position;
		    -ms-flex-pack: distribute;
            justify-content: @position;
        }

        .justify-content(@position) when (@position = space-between) {
		    -webkit-box-pack: justify;
            -webkit-justify-content: @position;
            -moz-justify-content: @position;
		    -ms-flex-pack: justify;
            justify-content: @position;
        }

        .justify-content(@position) when (default()) {
		    -webkit-box-pack: @position;
            -webkit-justify-content: @position;
            -moz-justify-content: @position;
		    -ms-flex-pack: @position;
            justify-content: @position;
        }

        .flex-flow(@values) {
            -webkit-flex-flow: @values;
	        -moz-flex-flow: @values;
	        -ms-flex-flow: @values;
	        flex-flow: @values;
        }

        .flex-wrap(@wrap) {
            -webkit-flex-wrap: @wrap;
	        -moz-flex-wrap: @wrap;
		    -ms-flex-wrap: @wrap;
	        flex-wrap: @wrap;
        }

        .flex-order(@order) {
            -webkit-box-ordinal-group: @order + 1;
	        -webkit-order: @order;
	        -moz-order: @order;
	        -ms-flex-order: @order;
	        order: @order;
        }

        .flex-grow(@factor) {
            -webkit-box-flex: @factor;
	        -webkit-flex-grow: @factor;
	        -moz-flex-grow: @factor;
	        -ms-flex-positive: @factor;
	        flex-grow: @factor;
        }

        .flex-shrink(@factor) {
            -webkit-flex-shrink: @factor;
	        -moz-flex-shrink: @factor;
	        -ms-flex-negative: @factor;
	        flex-shrink: @factor;
        }

        .flex-basis(@basis) {
	        -webkit-flex-basis: @basis;
	        -moz-flex-basis: @basis;
	        -ms-flex-preferred-size: @basis;
	        flex-basis: @basis;
        }

        .flex-absolute-center(@inline: false) {
            & when (@inline = false) {
                .flexbox();
                .align-items(center);
                .justify-content(center);
            }
            & when (@inline = true) {
                .inline-flexbox();
                .align-items(center);
                .justify-content(center);
            }
        }

        .flex-vertical-center(@inline: false) {
            & when (@inline = false) {
                .flexbox();
                .align-items(center);
            }
            & when (@inline = true) {
                .inline-flexbox();
                .align-items(center);
            }
        }
    }
}

#platui {
    #mixins {
        /// CSS Multi-column Layout

        /// Column Count

        .column-count(@args) {
            #platui > #variables;
            .column-count(@args; @webkit-moz-list);
        }
        .column-count(@args; @vendor-list) {
            #platui > #__mixins > .vendor-loop(column-count; @args; @vendor-list);
        }

        /// Column Fill

        .column-fill(@args) {
            #platui > #variables;
            .column-fill(@args; @webkit-moz-list);
        }
        .column-fill(@args; @vendor-list) {
            #platui > #__mixins > .vendor-loop(column-fill; @args; @vendor-list);
        }

        /// Column Gap

        .column-gap(@args) {
            #platui > #variables;
            .column-gap(@args; @webkit-moz-list);
        }
        .column-gap(@args; @vendor-list) {
            #platui > #__mixins > .vendor-loop(column-gap; @args; @vendor-list);
        }

        /// Column Rules

        .column-rule(@args) {
            #platui > #variables;
            .column-rule(@args; @webkit-moz-list);
        }
        .column-rule(@args; @vendor-list) {
            #platui > #__mixins > .vendor-loop(column-rule; @args; @vendor-list);
        }

        /// Column Rule Color

        .column-rule-color(@args) {
            #platui > #variables;
            .column-rule-color(@args; @webkit-moz-list);
        }
        .column-rule-color(@args; @vendor-list) {
            #platui > #__mixins > .vendor-loop(column-rule-color; @args; @vendor-list);
        }

        /// Column Rule Style

        .column-rule-style(@args) {
            #platui > #variables;
            .column-rule-style(@args; @webkit-moz-list);
        }
        .column-rule-style(@args; @vendor-list) {
            #platui > #__mixins > .vendor-loop(column-rule-style; @args; @vendor-list);
        }

        /// Column Rule Width

        .column-rule-width(@args) {
            #platui > #variables;
            .column-rule-width(@args; @webkit-moz-list);
        }
        .column-rule-width(@args; @vendor-list) {
            #platui > #__mixins > .vendor-loop(column-rule-width; @args; @vendor-list);
        }

        /// Column Span

        .column-span(@args) {
            #platui > #variables;
            .column-span(@args; @webkit-moz-list);
        }
        .column-span(@args; @vendor-list) {
            #platui > #__mixins > .vendor-loop(column-span; @args; @vendor-list);
        }

        /// Column Width

        .column-width(@args) {
            #platui > #variables;
            .column-width(@args; @webkit-moz-list);
        }
        .column-width(@args; @vendor-list) {
            #platui > #__mixins > .vendor-loop(column-width; @args; @vendor-list);
        }
    }
}

#platui {
    #mixins {
        #platui > #variables;
        /// Gradients

        .gradient(@default: #ffffff; @start: #000000; @stop: #ffffff) {
            #platui > #variables;
            .gradient(@default; @start; @stop; @webkit-moz-ms-strict);
        }
        .gradient(@default; @start; @stop; @vendor-list) {
            .linear-gradient-top(@default; @start; 0%; @stop; 100%; @vendor-list);
        }

        .horizontal-gradient(@default: #ffffff; @start: #000000; @stop: #ffffff) {
            #platui > #variables;
            .horizontal-gradient(@default; @start; @stop; @webkit-moz-ms-strict);
        }
        .horizontal-gradient(@default; @start; @stop; @vendor-list) {
            .linear-gradient-left(@default; @start; 0%; @stop; 100%; @vendor-list);
        }

        .linear-gradient-top(@default; @color1; @stop1; @color2; @stop2) {
            #platui > #variables;
            .linear-gradient-top(@default; @color1; @stop1; @color2; @stop2; @webkit-moz-ms-strict);
        }
        .linear-gradient-top(@default; @color1; @stop1; @color2; @stop2; @vendor-list) when not (iscolor(@vendor-list)) {
            @color-values: @color1 @stop1, @color2 @stop2;
            @gradient-value: top, @color-values;
            background-color: @default;
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2, @color2));
            #platui > #__mixins > .value-looper(background-image; linear-gradient; @gradient-value; @vendor-list; length(@vendor-list));
            background-image: linear-gradient(to bottom, @color-values);
        }

        .linear-gradient-top(@default; @color1; @stop1; @color2; @stop2; @color3; @stop3) when (iscolor(@color3)) {
            #platui > #variables;
            .linear-gradient-top(@default; @color1; @stop1; @color2; @stop2; @color3; @stop3; @webkit-moz-ms-strict);
        }
        .linear-gradient-top(@default; @color1; @stop1; @color2; @stop2; @color3; @stop3; @vendor-list) when not (iscolor(@vendor-list)) {
            @color-values: @color1 @stop1, @color2 @stop2, @color3 @stop3;
            @gradient-value: top, @color-values;
            background-color: @default;
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2, @color2), color-stop(@stop3, @color3));
            #platui > #__mixins > .value-looper(background-image; linear-gradient; @gradient-value; @vendor-list; length(@vendor-list));
            background-image: linear-gradient(to bottom, @color-values);
        }

        .linear-gradient-top(@default; @color1; @stop1; @color2; @stop2; @color3; @stop3; @color4; @stop4) when (iscolor(@color4)) {
            #platui > #variables;
            .linear-gradient-top(@default; @color1; @stop1; @color2; @stop2; @color3; @stop3; @color4; @stop4; @webkit-moz-ms-strict);
        }
        .linear-gradient-top(@default; @color1; @stop1; @color2; @stop2; @color3; @stop3; @color4; @stop4; @vendor-list) {
            @color-values: @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4;
            @gradient-value: top, @color-values;
            background-color: @default;
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2, @color2), color-stop(@stop3, @color3), color-stop(@stop4, @color4));
            #platui > #__mixins > .value-looper(background-image; linear-gradient; @gradient-value; @vendor-list; length(@vendor-list));
            background-image: linear-gradient(to bottom, @color-values);
        }

        .linear-gradient-left(@default; @color1; @stop1; @color2; @stop2) {
            #platui > #variables;
            .linear-gradient-left(@default; @color1; @stop1; @color2; @stop2; @webkit-moz-ms-strict);
        }
        .linear-gradient-left(@default; @color1; @stop1; @color2; @stop2; @vendor-list) when not (iscolor(@vendor-list)) {
            @color-values: @color1 @stop1, @color2 @stop2;
            @gradient-value: left, @color-values;
            background-color: @default;
            background-image: -webkit-gradient(linear, left top, right top, color-stop(@stop1, @color1), color-stop(@stop2, @color2));
            #platui > #__mixins > .value-looper(background-image; linear-gradient; @gradient-value; @vendor-list; length(@vendor-list));
            background-image: linear-gradient(to right, @color-values);
        }

        .linear-gradient-left(@default; @color1; @stop1; @color2; @stop2; @color3; @stop3) when (iscolor(@color3)) {
            #platui > #variables;
            .linear-gradient-left(@default; @color1; @stop1; @color2; @stop2; @color3; @stop3; @webkit-moz-ms-strict);
        }
        .linear-gradient-left(@default; @color1; @stop1; @color2; @stop2; @color3; @stop3; @vendor-list) when not (iscolor(@vendor-list)) {
            @color-values: @color1 @stop1, @color2 @stop2, @color3 @stop3;
            @gradient-value: left, @color-values;
            background-color: @default;
            background-image: -webkit-gradient(linear, left top, right top, color-stop(@stop1, @color1), color-stop(@stop2, @color2), color-stop(@stop3, @color3));
            #platui > #__mixins > .value-looper(background-image; linear-gradient; @gradient-value; @vendor-list; length(@vendor-list));
            background-image: linear-gradient(to right, @color-values);
        }

        .linear-gradient-left(@default; @color1; @stop1; @color2; @stop2; @color3; @stop3; @color4; @stop4) when (iscolor(@color4)) {
            #platui > #variables;
            .linear-gradient-left(@default; @color1; @stop1; @color2; @stop2; @color3; @stop3; @color4; @stop4; @webkit-moz-ms-strict);
        }
        .linear-gradient-left(@default; @color1; @stop1; @color2; @stop2; @color3; @stop3; @color4; @stop4; @vendor-list) {
            @color-values: @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4;
            @gradient-value: left, @color-values;
            background-color: @default;
            background-image: -webkit-gradient(linear, left top, right top, color-stop(@stop1, @color1), color-stop(@stop2, @color2), color-stop(@stop3, @color3), color-stop(@stop4, @color4));
            #platui > #__mixins > .value-looper(background-image; linear-gradient; @gradient-value; @vendor-list; length(@vendor-list));
            background-image: linear-gradient(to right, @color-values);
        }
    }
}

#platui {
    #mixins {
        /// Typography mixins
        .headings() {
            padding: 0;
            font-weight: 600;
        }

        .type(@type; @size; @lineHeight) {
            @{type} {
                font-size: @size;
                line-height: @lineHeight;
            }
        }

        .type-headings(@modifier: 1) {
            #platui > #media;

            /// Phone
            .type(p, @modifier * 1em, @modifier * 1.30em);
            .type(h1, @modifier * 2em, @modifier * 1.5874em);
            .type(h2, @modifier * 1.625em, @modifier * 1.1538em);
            .type(h3, @modifier * 1.375em, @modifier * 1.1363em);
            .type(h4, @modifier * 1.125em, @modifier * 1.1111em);
            .type(h5, @modifier * 0.925em, @modifier * 1.0974em);
            .type(h6, @modifier * 0.775em, @modifier * 1.0783em);

            /// Tablet
            .tab({
                .type(p, @modifier * 1em, @modifier * 1.412em);
                .type(h1, @modifier * 2.5em, @modifier * 1.37em);
                .type(h2, @modifier * 2em, @modifier * 1.25em);
                .type(h3, @modifier * 1.5em, @modifier * 1.25em);
                .type(h4, @modifier * 1.125em, @modifier * 1.2222em);
            });

            /// Desktop
            .dsk({
                .type(h1, @modifier * 3em, @modifier * 1.3em);
                .type(h2, @modifier * 2.25em, @modifier * 1.25em);
                .type(h3, @modifier * 1.75em, @modifier * 1.25em);
                .type(h5, @modifier * 1em, @modifier * 1.1111em);
                .type(h6, @modifier * 0.925em, @modifier * 1.1111em);
            });
        }
    }
}

/// ======= Control Variables ======== ///

#platui {
    #Button {
        #platui > #variables;

    /// ============= Default Button Colors ============== ///

        @color: @white;
        @background-color: @neutral-color;
        @border-color: darken(@neutral-color, 10%);

    /// ============= Button Sizes ============== ///

        @border-width: 1px;
        @button-font-size: 0.9em;
        @border-radius: @global-border-radius;
        @padding-vertical: 0.8em;
        @padding-horizontal: 1.2em;

    /// ====== Variable Button Styles ====== ///

        .plat-button(@prop; @value) {
            #platui > #mixins;

            & when (@prop = color) {
                color: @value;
            }
            & when (@prop = background-color) {
                background-color: @value;

                &:active,
                &.plat-selected {
                    background-color: darken(@value, 10%);
                }

                &.button-disabled,
                &[disabled],
                &:disabled {
                    background-color: @value;
                }

                &.button-outline {
                    border-color: @value;
                    color: @value;

                    &:active,
                    &.plat-selected {
                        background-color: @value;
                    }

                    &.button-disabled,
                    &[disabled],
                    &:disabled {
                        color: @value;
                    }
                }
            }
            & when (@prop = border-color) {
                border-color: @value;
            }
            & when (@prop = border-width) {
                border-width: @value;
            }
            & when (@prop = button-font-size) {
                font-size: @value;
            }
            & when (@prop = border-radius) {
                .border-radius(@value);
            }
            & when (@prop = padding-vertical) {
                padding-top: @value;
                padding-bottom: @value;
            }
            & when (@prop = padding-horizontal) {
                padding-left: @value;
                padding-right: @value;
            }
        }

    /// ============== Variable Button Group Styles =============== ///

        .plat-button-group(@prop; @value) {
            #platui > #mixins;

            & when (@prop = border-radius) {
                & > .plat-button:nth-of-type(1),
                & > .button:nth-of-type(1) {
                    .border-top-left-radius(@value);
                    .border-bottom-left-radius(@value);
                }

                & > .plat-button:nth-last-of-type(1),
                & > .button:nth-last-of-type(1) {
                    .border-top-right-radius(@value);
                    .border-bottom-right-radius(@value);
                }
            }
        }
    }

    #controls {
    /// ====== Variable Button Styles ====== ///

        .plat-button(@prop: undefined; @value: undefined) {
            #platui > #mixins;

            & when (@prop = undefined), (@value = undefined) {
                .border-radius(@border-radius);
                padding: @padding-vertical @padding-horizontal;
                background-color: @background-color;
                color: @color;
                border-width: @border-width;
                border-color: @border-color;
                font-size: @button-font-size;

                &:active,
                &.plat-selected {
                    background-color: darken(@background-color, 10%);
                }

                &.button-disabled,
                &[disabled],
                &:disabled {
                    background-color: @background-color;
                }

                &.button-outline {
                    border-color: @background-color;
                    color: @background-color;

                    &:active,
                    &.plat-selected {
                        background-color: @background-color;
                    }

                    &.button-disabled,
                    &[disabled],
                    &:disabled {
                        color: @background-color;
                    }
                }
            }
            & when (@prop = color) {
                color: @value;
            }
            & when (@prop = background-color) {
                background-color: @value;

                &:active,
                &.plat-selected {
                    background-color: darken(@value, 10%);
                }

                &.button-disabled,
                &[disabled],
                &:disabled {
                    background-color: @value;
                }

                &.button-outline {
                    border-color: @value;
                    color: @value;

                    &:active,
                    &.plat-selected {
                        background-color: @value;
                    }

                    &.button-disabled,
                    &[disabled],
                    &:disabled {
                        color: @value;
                    }
                }
            }
            & when (@prop = border-color) {
                border-color: @value;
            }
            & when (@prop = border-width) {
                border-width: @value;
            }
            & when (@prop = button-font-size) {
                font-size: @value;
            }
            & when (@prop = border-radius) {
                .border-radius(@value);
            }
            & when (@prop = padding-vertical) {
                padding-top: @value;
                padding-bottom: @value;
            }
            & when (@prop = padding-horizontal) {
                padding-left: @value;
                padding-right: @value;
            }
        }

    /// ============== Variable Button Group Styles =============== ///

        .plat-button-group(@prop: undefined; @value: undefined) {
            #platui > #mixins;

            & when (@prop = undefined), (@value = undefined) {
                & > .plat-button:nth-of-type(1),
                & > .button:nth-of-type(1) {
                    .border-top-left-radius(@border-radius);
                    .border-bottom-left-radius(@border-radius);
                }

                & > .plat-button:nth-last-of-type(1),
                & > .button:nth-last-of-type(1) {
                    .border-top-right-radius(@border-radius);
                    .border-bottom-right-radius(@border-radius);
                }
            }
            & when (@prop = border-radius) {
                & > .plat-button:nth-of-type(1),
                & > .button:nth-of-type(1) {
                    .border-top-left-radius(@value);
                    .border-bottom-left-radius(@value);
                }

                & > .plat-button:nth-last-of-type(1),
                & > .button:nth-last-of-type(1) {
                    .border-top-right-radius(@value);
                    .border-bottom-right-radius(@value);
                }
            }
        }
    }
}

#platui {
    #Carousel {
        #dependencies {
            @padding: 5px;
        }

        #platui > #variables;
        #platui > #Carousel > #dependencies;

    /// =========== Carousel Colors =========== ///

        @background-color: @transparent;
        @arrow-color: fadeout(@white, 50%);
        @arrow-active-color: @white;

    /// ============ Carousel Size ============ ///

        @padding-left: @padding;
        @padding-right: @padding;
        @padding-top: @padding;
        @padding-bottom: @padding;
        @arrow-perpendicular-length: 100%;
        @arrow-parallel-length: 1em;
        @arrow-icon-width: 1em;
        @arrow-icon-height: 0.55em;

    /// ============ Carousel Transition ============ ///

        @transition-time: 300ms;

    /// ============ Carousel Misc ============ ///

        @arrow-font-size: 400%;
        @arrow-font-family: "platypus-icons";
        @arrow-font-weight: bold;
        @arrow-down: "\e815";
        @arrow-left: "\e816";
        @arrow-right: "\e817";
        @arrow-up: "\e818";

    /// =========== Variable Carousel Styles =========== ///

        .plat-carousel(@prop; @value) {
            #platui > #mixins;

            & when (@prop = padding) {
                .plat-carousel-viewport {
                    .plat-carousel-container {
                        .plat-carousel-item {
                            padding-left: @value;
                            padding-right: @value;
                            padding-top: @value;
                            padding-bottom: @value;
                        }
                    }
                }
            }
            & when (@prop = background-color) {
                .plat-carousel-viewport {
                    .plat-carousel-container {
                        background-color: @value;
                    }
                }
            }
            & when (@prop = arrow-color) {
                .plat-carousel-viewport {
                    .plat-back-arrow,
                    .plat-forward-arrow {
                        color: @value;
                    }
                }
            }
            & when (@prop = arrow-active-color) {
                .plat-carousel-viewport {
                    .plat-back-arrow,
                    .plat-forward-arrow {
                        &:active,
                        &:hover {
                            color: @value;
                        }
                    }
                }
            }
            & when (@prop = arrow-font-size) {
                .plat-carousel-viewport {
                    .plat-back-arrow,
                    .plat-forward-arrow {
                        font-size: @value;
                    }
                }
            }
            & when (@prop = arrow-font-family) {
                .plat-carousel-viewport {
                    .plat-back-arrow,
                    .plat-forward-arrow {
                        .plat-icon-arrow-down,
                        .plat-icon-arrow-up,
                        .plat-icon-arrow-left,
                        .plat-icon-arrow-right {
                            font-family: @value;
                        }
                    }
                }
            }
            & when (@prop = arrow-font-weight) {
                .plat-carousel-viewport {
                    .plat-back-arrow,
                    .plat-forward-arrow {
                        .plat-icon-arrow-down,
                        .plat-icon-arrow-up,
                        .plat-icon-arrow-left,
                        .plat-icon-arrow-right {
                            font-weight: @value;
                        }
                    }
                }
            }
            & when (@prop = arrow-down) {
                .plat-carousel-viewport {
                    .plat-back-arrow,
                    .plat-forward-arrow {
                        .plat-icon-arrow-down::before { content: @value; }
                    }
                }
            }
            & when (@prop = arrow-left) {
                .plat-carousel-viewport {
                    .plat-back-arrow,
                    .plat-forward-arrow {
                        .plat-icon-arrow-left::before { content: @value; }
                    }
                }
            }
            & when (@prop = arrow-right) {
                .plat-carousel-viewport {
                    .plat-back-arrow,
                    .plat-forward-arrow {
                        .plat-icon-arrow-right::before { content: @value; }
                    }
                }
            }
            & when (@prop = arrow-up) {
                .plat-carousel-viewport {
                    .plat-back-arrow,
                    .plat-forward-arrow {
                        .plat-icon-arrow-up::before { content: @value; }
                    }
                }
            }
            & when (@prop = padding-left) {
                .plat-carousel-viewport {
                    .plat-carousel-container {
                        .plat-carousel-item {
                            padding-left: @value;
                        }
                    }
                }
            }
            & when (@prop = padding-right) {
                .plat-carousel-viewport {
                    .plat-carousel-container {
                        .plat-carousel-item {
                            padding-right: @value;
                        }
                    }
                }
            }
            & when (@prop = padding-top) {
                .plat-carousel-viewport {
                    .plat-carousel-container {
                        .plat-carousel-item {
                            padding-top: @value;
                        }
                    }
                }
            }
            & when (@prop = padding-bottom) {
                .plat-carousel-viewport {
                    .plat-carousel-container {
                        .plat-carousel-item {
                            padding-bottom: @value;
                        }
                    }
                }
            }
            & when (@prop = arrow-perpendicular-length) {
                &.plat-horizontal {
                    .plat-carousel-viewport {
                        .plat-back-arrow,
                        .plat-forward-arrow {
                            height: @value;
                        }
                    }
                }

                &.plat-vertical {
                    .plat-carousel-viewport {
                        .plat-back-arrow,
                        .plat-forward-arrow {
                            width: @value;
                        }
                    }
                }
            }
            & when (@prop = arrow-parallel-length) {
                &.plat-horizontal {
                    .plat-carousel-viewport {
                        .plat-back-arrow,
                        .plat-forward-arrow {
                            width: @value;
                        }
                    }
                }

                &.plat-vertical {
                    .plat-carousel-viewport {
                        .plat-back-arrow,
                        .plat-forward-arrow {
                            height: @value;
                        }
                    }
                }
            }
            & when (@prop = arrow-icon-width) {
                .plat-carousel-viewport {
                    .plat-back-arrow,
                    .plat-forward-arrow {
                        .plat-icon-arrow-down,
                        .plat-icon-arrow-up,
                        .plat-icon-arrow-left,
                        .plat-icon-arrow-right {
                            width: @value;
                        }
                    }
                }
            }
            & when (@prop = arrow-icon-height) {
                .plat-carousel-viewport {
                    .plat-back-arrow,
                    .plat-forward-arrow {
                        .plat-icon-arrow-down,
                        .plat-icon-arrow-up,
                        .plat-icon-arrow-left,
                        .plat-icon-arrow-right {
                            height: @value;
                        }
                    }
                }
            }
            & when (@prop = transition-time) {
                .plat-carousel-viewport {
                    .plat-carousel-container {
                        &.plat-transition-init {
                            .transition-duration(@value);
                        }
                    }
                }
            }
        }
    }

    #controls {
    /// =========== Variable Carousel Styles =========== ///

        .plat-carousel(@prop: undefined; @value: undefined) {
            #platui > #mixins;

            & when (@prop = undefined), (@value = undefined) {
                .plat-carousel-viewport {
                    .plat-carousel-container {
                        background-color: @background-color;

                        .plat-carousel-item {
                            padding-left: @padding-left;
                            padding-right: @padding-right;
                            padding-top: @padding-top;
                            padding-bottom: @padding-bottom;
                        }

                        &.plat-transition-init {
                            .transition-duration(@transition-time);
                        }
                    }

                    .plat-back-arrow,
                    .plat-forward-arrow {
                        color: @arrow-color;
                        font-size: @arrow-font-size;

                        .plat-icon-arrow-down,
                        .plat-icon-arrow-up,
                        .plat-icon-arrow-left,
                        .plat-icon-arrow-right {
                            height: @arrow-icon-height;
                            width: @arrow-icon-width;
                            font-family: @arrow-font-family;
                            font-weight: @arrow-font-weight;
                        }

                        .plat-icon-arrow-down::before { content: @arrow-down; }
                        .plat-icon-arrow-left::before { content: @arrow-left; }
                        .plat-icon-arrow-right::before { content: @arrow-right; }
                        .plat-icon-arrow-up::before { content: @arrow-up; }

                        &:active,
                        &:hover {
                            color: @arrow-active-color;
                        }
                    }
                }

                &.plat-horizontal {
                    .plat-carousel-viewport {
                        .plat-back-arrow,
                        .plat-forward-arrow {
                            width: @arrow-parallel-length;
                            height: @arrow-perpendicular-length;
                        }
                    }
                }

                &.plat-vertical {
                    .plat-carousel-viewport {
                        .plat-back-arrow,
                        .plat-forward-arrow {
                            width: @arrow-perpendicular-length;
                            height: @arrow-parallel-length;
                        }
                    }
                }
            }
            & when (@prop = padding) {
                .plat-carousel-viewport {
                    .plat-carousel-container {
                        .plat-carousel-item {
                            padding-left: @value;
                            padding-right: @value;
                            padding-top: @value;
                            padding-bottom: @value;
                        }
                    }
                }
            }
            & when (@prop = background-color) {
                .plat-carousel-viewport {
                    .plat-carousel-container {
                        background-color: @value;
                    }
                }
            }
            & when (@prop = arrow-color) {
                .plat-carousel-viewport {
                    .plat-back-arrow,
                    .plat-forward-arrow {
                        color: @value;
                    }
                }
            }
            & when (@prop = arrow-active-color) {
                .plat-carousel-viewport {
                    .plat-back-arrow,
                    .plat-forward-arrow {
                        &:active,
                        &:hover {
                            color: @value;
                        }
                    }
                }
            }
            & when (@prop = arrow-font-size) {
                .plat-carousel-viewport {
                    .plat-back-arrow,
                    .plat-forward-arrow {
                        font-size: @value;
                    }
                }
            }
            & when (@prop = arrow-font-family) {
                .plat-carousel-viewport {
                    .plat-back-arrow,
                    .plat-forward-arrow {
                        .plat-icon-arrow-down,
                        .plat-icon-arrow-up,
                        .plat-icon-arrow-left,
                        .plat-icon-arrow-right {
                            font-family: @value;
                        }
                    }
                }
            }
            & when (@prop = arrow-font-weight) {
                .plat-carousel-viewport {
                    .plat-back-arrow,
                    .plat-forward-arrow {
                        .plat-icon-arrow-down,
                        .plat-icon-arrow-up,
                        .plat-icon-arrow-left,
                        .plat-icon-arrow-right {
                            font-weight: @value;
                        }
                    }
                }
            }
            & when (@prop = arrow-down) {
                .plat-carousel-viewport {
                    .plat-back-arrow,
                    .plat-forward-arrow {
                        .plat-icon-arrow-down::before { content: @value; }
                    }
                }
            }
            & when (@prop = arrow-left) {
                .plat-carousel-viewport {
                    .plat-back-arrow,
                    .plat-forward-arrow {
                        .plat-icon-arrow-left::before { content: @value; }
                    }
                }
            }
            & when (@prop = arrow-right) {
                .plat-carousel-viewport {
                    .plat-back-arrow,
                    .plat-forward-arrow {
                        .plat-icon-arrow-right::before { content: @value; }
                    }
                }
            }
            & when (@prop = arrow-up) {
                .plat-carousel-viewport {
                    .plat-back-arrow,
                    .plat-forward-arrow {
                        .plat-icon-arrow-up::before { content: @value; }
                    }
                }
            }
            & when (@prop = padding-left) {
                .plat-carousel-viewport {
                    .plat-carousel-container {
                        .plat-carousel-item {
                            padding-left: @value;
                        }
                    }
                }
            }
            & when (@prop = padding-right) {
                .plat-carousel-viewport {
                    .plat-carousel-container {
                        .plat-carousel-item {
                            padding-right: @value;
                        }
                    }
                }
            }
            & when (@prop = padding-top) {
                .plat-carousel-viewport {
                    .plat-carousel-container {
                        .plat-carousel-item {
                            padding-top: @value;
                        }
                    }
                }
            }
            & when (@prop = padding-bottom) {
                .plat-carousel-viewport {
                    .plat-carousel-container {
                        .plat-carousel-item {
                            padding-bottom: @value;
                        }
                    }
                }
            }
            & when (@prop = arrow-perpendicular-length) {
                &.plat-horizontal {
                    .plat-carousel-viewport {
                        .plat-back-arrow,
                        .plat-forward-arrow {
                            height: @value;
                        }
                    }
                }

                &.plat-vertical {
                    .plat-carousel-viewport {
                        .plat-back-arrow,
                        .plat-forward-arrow {
                            width: @value;
                        }
                    }
                }
            }
            & when (@prop = arrow-parallel-length) {
                &.plat-horizontal {
                    .plat-carousel-viewport {
                        .plat-back-arrow,
                        .plat-forward-arrow {
                            width: @value;
                        }
                    }
                }

                &.plat-vertical {
                    .plat-carousel-viewport {
                        .plat-back-arrow,
                        .plat-forward-arrow {
                            height: @value;
                        }
                    }
                }
            }
            & when (@prop = arrow-icon-width) {
                .plat-carousel-viewport {
                    .plat-back-arrow,
                    .plat-forward-arrow {
                        .plat-icon-arrow-down,
                        .plat-icon-arrow-up,
                        .plat-icon-arrow-left,
                        .plat-icon-arrow-right {
                            width: @value;
                        }
                    }
                }
            }
            & when (@prop = arrow-icon-height) {
                .plat-carousel-viewport {
                    .plat-back-arrow,
                    .plat-forward-arrow {
                        .plat-icon-arrow-down,
                        .plat-icon-arrow-up,
                        .plat-icon-arrow-left,
                        .plat-icon-arrow-right {
                            height: @value;
                        }
                    }
                }
            }
            & when (@prop = transition-time) {
                .plat-carousel-viewport {
                    .plat-carousel-container {
                        &.plat-transition-init {
                            .transition-duration(@value);
                        }
                    }
                }
            }
        }
    }
}

#platui {
    #Checkbox {
        #dependencies {
            #platui > #variables;
            @fill-color: @grey;
        }

        #platui > #Checkbox > #dependencies;

    /// =========== Checkbox Colors =========== ///

        @mark-color: @white;
        @background-color: @transparent;
        @border-color: @fill-color;

    /// =========== Active Checkbox Colors =========== ///

        @active-border-color: @fill-color;
        @active-background-color: @fill-color;

    /// =========== Checkbox Sizes ============ ///

        @diameter: @global-indicator-diameter;
        @border-width: 1px;

    /// =========== Variable Checkbox Styles =========== ///

        .plat-checkbox(@prop; @value) {
            #platui > #mixins;

            & when (@prop = fill-color) {
                .plat-checkbox-container {
                    border-color: @value;

                    &.plat-check,
                    &.plat-x {
                        background-color: @value;
                        border-color: @value;
                    }
                }
            }
            & when (@prop = mark-color) {
                .plat-checkbox-container {
                    &.plat-check,
                    &.plat-x {
                        .plat-mark::before,
                        .plat-mark::after {
                            background-color: @value;
                        }
                    }
                }
            }
            & when (@prop = background-color) {
                .plat-checkbox-container {
                    background-color: @value;
                }
            }
            & when (@prop = border-color) {
                .plat-checkbox-container {
                    border-color: @value;
                }
            }
            & when (@prop = active-border-color) {
                .plat-checkbox-container {
                    &.plat-check,
                    &.plat-x {
                        border-color: @value;
                    }
                }
            }
            & when (@prop = active-background-color) {
                .plat-checkbox-container {
                    &.plat-check,
                    &.plat-x {
                        background-color: @value;
                    }
                }
            }
            & when (@prop = diameter) {
                & > span {
                    line-height: @value;
                }

                .plat-checkbox-container {
                    .flex(0 0 @value);
                    width: @value;
                    max-width: @value;
                    height: @value;
                    max-height: @value;

                    &.plat-check {
                        .plat-mark::before {
                            width: @value / 2.6;
                        }

                        .plat-mark::after {
                            width: @value / 1.7;
                        }
                    }

                    &.plat-x {
                        .plat-mark::before,
                        .plat-mark::after {
                            width: @value / 1.5;
                        }
                    }
                }
            }
            & when (@prop = border-width) {
                .plat-checkbox-container {
                    border-width: @value;
                }
            }
        }
    }

    #controls {
    /// =========== Variable Checkbox Styles =========== ///

        .plat-checkbox(@prop: undefined; @value: undefined) {
            #platui > #mixins;

            & when (@prop = undefined), (@value = undefined) {
                & > span {
                    line-height: @diameter;
                }

                .plat-checkbox-container {
                    .flex(0 0 @diameter);
                    width: @diameter;
                    max-width: @diameter;
                    height: @diameter;
                    max-height: @diameter;
                    background-color: @background-color;
                    border-width: @border-width;
                    border-color: @border-color;

                    &.plat-check,
                    &.plat-x {
                        background-color: @active-background-color;
                        border-color: @active-border-color;

                        .plat-mark::before,
                        .plat-mark::after {
                            background-color: @mark-color;
                        }
                    }

                    &.plat-check {
                        .plat-mark::before {
                            width: @diameter / 2.6;
                        }

                        .plat-mark::after {
                            width: @diameter / 1.7;
                        }
                    }

                    &.plat-x {
                        .plat-mark::before,
                        .plat-mark::after {
                            width: @diameter / 1.5;
                        }
                    }
                }
            }
            & when (@prop = fill-color) {
                .plat-checkbox-container {
                    border-color: @value;

                    &.plat-check,
                    &.plat-x {
                        background-color: @value;
                        border-color: @value;
                    }
                }
            }
            & when (@prop = mark-color) {
                .plat-checkbox-container {
                    &.plat-check,
                    &.plat-x {
                        .plat-mark::before,
                        .plat-mark::after {
                            background-color: @value;
                        }
                    }
                }
            }
            & when (@prop = background-color) {
                .plat-checkbox-container {
                    background-color: @value;
                }
            }
            & when (@prop = border-color) {
                .plat-checkbox-container {
                    border-color: @value;
                }
            }
            & when (@prop = active-border-color) {
                .plat-checkbox-container {
                    &.plat-check,
                    &.plat-x {
                        border-color: @value;
                    }
                }
            }
            & when (@prop = active-background-color) {
                .plat-checkbox-container {
                    &.plat-check,
                    &.plat-x {
                        background-color: @value;
                    }
                }
            }
            & when (@prop = diameter) {
                & > span {
                    line-height: @value;
                }

                .plat-checkbox-container {
                    .flex(0 0 @value);
                    width: @value;
                    max-width: @value;
                    height: @value;
                    max-height: @value;

                    &.plat-check {
                        .plat-mark::before {
                            width: @value / 2.6;
                        }

                        .plat-mark::after {
                            width: @value / 1.7;
                        }
                    }

                    &.plat-x {
                        .plat-mark::before,
                        .plat-mark::after {
                            width: @value / 1.5;
                        }
                    }
                }
            }
            & when (@prop = border-width) {
                .plat-checkbox-container {
                    border-width: @value;
                }
            }
        }
    }
}

#platui {
    #Drawer {
        #dependencies {
            @length-default: 80%;
        }

        #platui > #variables;
        #platui > #Drawer > #dependencies;

    /// =========== Drawer Colors =========== ///

        @color: @white;
        @background-color: @neutral-color;

    /// =========== Drawer Lengths =========== ///

        @length-left: @length-default;
        @length-right: @length-default;
        @length-top: @length-default;
        @length-bottom: @length-default;

    /// =========== Drawer Root Shadow =========== ///

        @shadow-left: -2px 0px 10px 0px fadeout(@black, 30%);
        @shadow-right: 2px 0px 10px 0px fadeout(@black, 30%);
        @shadow-top: 0px -2px 10px 0px fadeout(@black, 30%);
        @shadow-bottom: 0px 2px 10px 0px fadeout(@black, 30%);

    /// =========== Drawer Root Transition =========== ///

        @transition-time: 300ms;
        @transition-function: ease-out;

    /// =========== Variable Drawer Styles =========== ///

        .plat-drawer(@prop; @value) {
            & when (@prop = length-default) {
                &.plat-left {
                    width: @value;
                }

                &.plat-right {
                    width: @value;
                }

                &.plat-top {
                    height: @value;
                }

                &.plat-bottom {
                    height: @value;
                }
            }
            & when (@prop = color) {
                color: @value;
            }
            & when (@prop = background-color) {
                background-color: @value;
            }
            & when (@prop = length-left) {
                &.plat-left {
                    width: @value;
                }
            }
            & when (@prop = length-right) {
                &.plat-right {
                    width: @value;
                }
            }
            & when (@prop = length-top) {
                &.plat-top {
                    height: @value;
                }
            }
            & when (@prop = length-bottom) {
                &.plat-bottom {
                    height: @value;
                }
            }
        }

    /// =========== Drawer Controller Root Element Styles =========== ///

        .plat-drawer-root(@prop; @value) {
            #platui > #mixins;

            & when (@prop = shadow-left) {
                &.plat-drawer-transition-left {
                    .box-shadow(@value);
                }
            }
            & when (@prop = shadow-right) {
                &.plat-drawer-transition-right {
                    .box-shadow(@value);
                }
            }
            & when (@prop = shadow-top) {
                &.plat-drawer-transition-top {
                    .box-shadow(@value);
                }
            }
            & when (@prop = shadow-bottom) {
                &.plat-drawer-transition-bottom {
                    .box-shadow(@value);
                }
            }
            & when (@prop = transition-time) {
                &.plat-transition-init {
                    .transition-duration(@value);
                }
            }
            & when (@prop = transition-function) {
                &.plat-transition-init {
                    .transition-timing-function(@value);
                }
            }
        }
    }

    #controls {
    /// =========== Variable Drawer Styles =========== ///

        .plat-drawer(@prop: undefined; @value: undefined) {
            & when (@prop = undefined), (@value = undefined) {
                color: @color;
                background-color: @background-color;

                &.plat-left {
                    width: @length-left;
                }

                &.plat-right {
                    width: @length-right;
                }

                &.plat-top {
                    height: @length-top;
                }

                &.plat-bottom {
                    height: @length-bottom;
                }
            }
            & when (@prop = length-default) {
                &.plat-left {
                    width: @value;
                }

                &.plat-right {
                    width: @value;
                }

                &.plat-top {
                    height: @value;
                }

                &.plat-bottom {
                    height: @value;
                }
            }
            & when (@prop = color) {
                color: @value;
            }
            & when (@prop = background-color) {
                background-color: @value;
            }
            & when (@prop = length-left) {
                &.plat-left {
                    width: @value;
                }
            }
            & when (@prop = length-right) {
                &.plat-right {
                    width: @value;
                }
            }
            & when (@prop = length-top) {
                &.plat-top {
                    height: @value;
                }
            }
            & when (@prop = length-bottom) {
                &.plat-bottom {
                    height: @value;
                }
            }
        }

    /// =========== Drawer Controller Root Element Styles =========== ///

        .plat-drawer-root(@prop: undefined; @value: undefined) {
            #platui > #mixins;

            & when (@prop = undefined), (@value = undefined) {
                &.plat-drawer-transition-left {
                    .box-shadow(@shadow-left);
                }

                &.plat-drawer-transition-right {
                    .box-shadow(@shadow-right);
                }

                &.plat-drawer-transition-top {
                    .box-shadow(@shadow-top);
                }

                &.plat-drawer-transition-bottom {
                    .box-shadow(@shadow-bottom);
                }

                &.plat-transition-init {
                    -webkit-transition: -webkit-transform @transition-time @transition-function;
                    -moz-transition: -moz-transform @transition-time @transition-function;
                    transition: transform @transition-time @transition-function;
                }
            }
            & when (@prop = shadow-left) {
                &.plat-drawer-transition-left {
                    .box-shadow(@value);
                }
            }
            & when (@prop = shadow-right) {
                &.plat-drawer-transition-right {
                    .box-shadow(@value);
                }
            }
            & when (@prop = shadow-top) {
                &.plat-drawer-transition-top {
                    .box-shadow(@value);
                }
            }
            & when (@prop = shadow-bottom) {
                &.plat-drawer-transition-bottom {
                    .box-shadow(@value);
                }
            }
            & when (@prop = transition-time) {
                &.plat-transition-init {
                    .transition-duration(@value);
                }
            }
            & when (@prop = transition-function) {
                &.plat-transition-init {
                    .transition-timing-function(@value);
                }
            }
        }
    }
}

#platui {
    #File {
        #platui > #variables;

    /// ============== File Colors =============== ///

        @text-color: @default-font-color;
        @input-background-color: @transparent;
        @input-border-color: @neutral-color;
        @button-color: @white;
        @button-background-color: @neutral-color;

    /// =============== File Sizes =============== ///

        @height: 2.5em;
        @width: 16em;
        @button-width: 6em;
        @border-radius: @global-border-radius;

    /// =========== Variable File Styles =========== ///

        .plat-file(@prop; @value) {
            #platui > #mixins;

            & when (@prop = text-color) {
                .plat-file-container {
                    .plat-file-input {
                        color: @value;
                    }
                }
            }
            & when (@prop = input-background-color) {
                .plat-file-container {
                    .plat-file-input {
                        background-color: @value;
                    }
                }
            }
            & when (@prop = input-border-color) {
                .plat-file-container {
                    .plat-file-input {
                        border-color: @value;
                    }
                }
            }
            & when (@prop = button-color) {
                .plat-file-container {
                    .plat-file-button {
                        color: @value;
                    }
                }
            }
            & when (@prop = button-background-color) {
                .plat-file-container {
                    .plat-file-button {
                        background-color: @value;
                        border-color: @value;

                        &:active {
                            background-color: darken(@value, 10%);
                        }

                        &[disabled],
                        &:disabled {
                            background-color: @value;
                        }
                    }
                }

                &.file-outline {
                    .plat-file-button {
                        border-color: @value;
                        color: @value;

                        &:active {
                            background-color: @value;
                        }

                        &[disabled],
                        &:disabled {
                            color: @value;
                        }
                    }
                }
            }
            & when (@prop = height) {
                height: @value;
            }
            & when (@prop = width) {
                width: @value;
            }
            & when (@prop = button-width) {
                .plat-file-container {
                    padding-right: @value;

                    .plat-file-button {
                        width: @value;
                    }
                }
            }
            & when (@prop = border-radius) {
                .plat-file-container {
                    .plat-file-input {
                        .border-top-left-radius(@value);
                        .border-bottom-left-radius(@value);
                    }

                    .plat-file-button {
                        .border-top-right-radius(@value);
                        .border-bottom-right-radius(@value);
                    }
                }
            }
        }
    }

    #controls {
        /// =========== Variable File Styles =========== ///

        .plat-file(@prop: undefined; @value: undefined) {
            #platui > #mixins;

            & when (@prop = undefined), (@value = undefined) {
                height: @height;
                width: @width;

                .plat-file-container {
                    padding-right: @button-width;

                    .plat-file-input {
                        .border-top-left-radius(@border-radius);
                        .border-bottom-left-radius(@border-radius);
                        background-color: @input-background-color;
                        color: @text-color;
                        border-color: @input-border-color;
                    }

                    .plat-file-button {
                        .border-top-right-radius(@border-radius);
                        .border-bottom-right-radius(@border-radius);
                        width: @button-width;
                        background-color: @button-background-color;
                        color: @button-color;
                        border-color: @button-background-color;

                        &:active {
                            background-color: darken(@button-background-color, 10%);
                        }

                        &[disabled],
                        &:disabled {
                            background-color: @button-background-color;
                        }
                    }
                }

                &.file-outline {
                    .plat-file-button {
                        border-color: @button-background-color;
                        color: @button-background-color;

                        &:active {
                            background-color: @button-background-color;
                        }

                        &[disabled],
                        &:disabled {
                            color: @button-background-color;
                        }
                    }
                }
            }
            & when (@prop = text-color) {
                .plat-file-container {
                    .plat-file-input {
                        color: @value;
                    }
                }
            }
            & when (@prop = input-background-color) {
                .plat-file-container {
                    .plat-file-input {
                        background-color: @value;
                    }
                }
            }
            & when (@prop = input-border-color) {
                .plat-file-container {
                    .plat-file-input {
                        border-color: @value;
                    }
                }
            }
            & when (@prop = button-color) {
                .plat-file-container {
                    .plat-file-button {
                        color: @value;
                    }
                }
            }
            & when (@prop = button-background-color) {
                .plat-file-container {
                    .plat-file-button {
                        background-color: @value;
                        border-color: @value;

                        &:active {
                            background-color: darken(@value, 10%);
                        }

                        &[disabled],
                        &:disabled {
                            background-color: @value;
                        }
                    }
                }

                &.file-outline {
                    .plat-file-button {
                        border-color: @value;
                        color: @value;

                        &:active {
                            background-color: @value;
                        }

                        &[disabled],
                        &:disabled {
                            color: @value;
                        }
                    }
                }
            }
            & when (@prop = height) {
                height: @value;
            }
            & when (@prop = width) {
                width: @value;
            }
            & when (@prop = button-width) {
                .plat-file-container {
                    padding-right: @value;

                    .plat-file-button {
                        width: @value;
                    }
                }
            }
            & when (@prop = border-radius) {
                .plat-file-container {
                    .plat-file-input {
                        .border-top-left-radius(@value);
                        .border-bottom-left-radius(@value);
                    }

                    .plat-file-button {
                        .border-top-right-radius(@value);
                        .border-bottom-right-radius(@value);
                    }
                }
            }
        }
    }
}

#platui {
    #Image {
    /// =========== Variable Image Styles =========== ///

        .plat-image(@prop; @value) { }
    }

    #controls {
        /// =========== Variable Image Styles =========== ///

        .plat-image(@prop: undefined; @value: undefined) { }
    }
}

#platui {
    #Input {
        #dependencies {
            #platui > #variables;
            @border-color: @neutral-color;
        }

        #platui > #Input > #dependencies;

    /// ============== Input Colors =============== ///

        @text-color: @default-font-color;
        @background-color: @transparent;
        @placeholder-color: @neutral-color;

    /// =============== Input Sizes =============== ///

        @height: 2.5em;
        @width: 18em;
        @border-style: solid;
        @border-bottom-width: 2px;
        @border-bottom-color: @border-color;
        @border-bottom-focus: darken(@border-color, 25%);
        @outline-border-width: 1px;
        @outline-border-color: @border-color;
        @outline-border-focus: darken(@border-color, 25%);
        @outline-border-radius: @global-border-radius;

    /// =========== Variable Input Styles =========== ///

        .plat-input(@prop; @value) {
            #platui > #mixins;

            & when (@prop = border-color) {
                &:not(.input-outline),
                &.input-outline {
                    border-color: @value;

                    &:focus {
                        border-color: darken(@value, 25%);
                    }
                }
            }
            & when (@prop = border-style) {
                &:not(.input-outline),
                &.input-outline {
                    border-style: @value;
                }
            }
            & when (@prop = border-bottom-width) {
                &:not(.input-outline) {
                    border-width: @value;
                }
            }
            & when (@prop = border-bottom-color) {
                &:not(.input-outline) {
                    border-color: @value;
                }
            }
            & when (@prop = border-bottom-focus) {
                &:not(.input-outline) {
                    &:focus {
                        border-color: @value;
                    }
                }
            }
            & when (@prop = outline-border-width) {
                &.input-outline {
                    border-width: @value;
                }
            }
            & when (@prop = outline-border-color) {
                &.input-outline {
                    border-color: @value;
                }
            }
            & when (@prop = outline-border-focus) {
                &.input-outline {
                    &:focus {
                        border-color: @value;
                    }
                }
            }
            & when (@prop = outline-border-radius) {
                &.input-outline {
                    .border-radius(@value);
                }
            }
            & when (@prop = text-color) {
                color: @value;
            }
            & when (@prop = background-color) {
                background-color: @value;
            }
            & when (@prop = placeholder-color) {
                &::-webkit-input-placeholder {
                    color: @value;
                }

                &::-moz-input-placeholder {
                    color: @value;
                }

                &:-moz-input-placeholder {
                    color: @value;
                }

                &:-ms-input-placeholder {
                    color: @value;
                }
            }
            & when (@prop = height) {
                height: @value;
            }
            & when (@prop = width) {
                width: @value;
            }
        }
    }

    #controls {
        /// =========== Variable Input Styles =========== ///

        .plat-input(@prop: undefined; @value: undefined) {
            #platui > #mixins;

            & when (@prop = undefined), (@value = undefined) {
                width: @width;
                height: @height;
                background-color: @background-color;
                color: @text-color;

            /// =========== Placeholder Styling =========== ///

                &::-webkit-input-placeholder {
                    color: @placeholder-color;
                }

                &::-moz-input-placeholder {
                    color: @placeholder-color;
                }

                &:-moz-input-placeholder {
                    color: @placeholder-color;
                }

                &:-ms-input-placeholder {
                    color: @placeholder-color;
                }

                &:not(.input-outline) {
                    border-bottom: @border-bottom-width @border-style @border-bottom-color;

                    &:focus {
                        border-color: @border-bottom-focus;
                    }
                }

            /// ============== Secondary Input =============== ///

                &.input-outline {
                    .border-radius(@outline-border-radius);
                    border: @outline-border-width @border-style @outline-border-color;

                    &:focus {
                        border-color: @outline-border-focus;
                    }
                }
            }
            & when (@prop = border-color) {
                &:not(.input-outline),
                &.input-outline {
                    border-color: @value;

                    &:focus {
                        border-color: darken(@value, 25%);
                    }
                }
            }
            & when (@prop = border-style) {
                &:not(.input-outline),
                &.input-outline {
                    border-style: @value;
                }
            }
            & when (@prop = border-bottom-width) {
                &:not(.input-outline) {
                    border-width: @value;
                }
            }
            & when (@prop = border-bottom-color) {
                &:not(.input-outline) {
                    border-color: @value;
                }
            }
            & when (@prop = border-bottom-focus) {
                &:not(.input-outline) {
                    &:focus {
                        border-color: @value;
                    }
                }
            }
            & when (@prop = outline-border-width) {
                &.input-outline {
                    border-width: @value;
                }
            }
            & when (@prop = outline-border-color) {
                &.input-outline {
                    border-color: @value;
                }
            }
            & when (@prop = outline-border-focus) {
                &.input-outline {
                    &:focus {
                        border-color: @value;
                    }
                }
            }
            & when (@prop = outline-border-radius) {
                &.input-outline {
                    .border-radius(@value);
                }
            }
            & when (@prop = text-color) {
                color: @value;
            }
            & when (@prop = background-color) {
                background-color: @value;
            }
            & when (@prop = placeholder-color) {
                &::-webkit-input-placeholder {
                    color: @value;
                }

                &::-moz-input-placeholder {
                    color: @value;
                }

                &:-moz-input-placeholder {
                    color: @value;
                }

                &:-ms-input-placeholder {
                    color: @value;
                }
            }
            & when (@prop = height) {
                height: @value;
            }
            & when (@prop = width) {
                width: @value;
            }
        }
    }
}

#platui {
    #Listview {
        #platui > #variables;

    /// =========== Listview Colors =========== ///

        @manipulated-viewport-background-color: @white;

    /// =========== Listview Animations =========== ///

        @refresh-transition-time: 200ms;

        @enter-init: {
            opacity: 0;
        };

        @enter-animation-name: LISTVIEW_ITEM_ENTER;
        @enter-animation-duration: 300ms;
        @leave-animation-name: LISTVIEW_ITEM_LEAVE;
        @leave-animation-duration: 300ms;

    /// =========== Listview Animation Mixins =========== ///

        .enter(@name) {
            #platui > #animations > .keyframes(@name);
            .frames(@prefix) {
                0% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }
        }

        .leave(@name) {
            #platui > #animations > .keyframes(@name);
            .frames(@prefix) {
                0% {
                    opacity: 1;
                }
                100% {
                    opacity: 0;
                }
            }
        }

    /// =========== Variable Listview Styles =========== ///

        .plat-listview(@prop; @value) {
            #platui > #mixins;

            & when (@prop = enter-animation-name) {
                &.plat-animated {
                    .plat-listview-viewport {
                        .plat-scroll-container {
                            .plat-container {
                                .plat-enter {
                                    .animation-name(@value);
                                }
                            }
                        }
                    }
                }
            }
            & when (@prop = enter-animation-duration) {
                &.plat-animated {
                    .plat-listview-viewport {
                        .plat-scroll-container {
                            .plat-container {
                                .plat-enter {
                                    .animation-duration(@value);
                                }
                            }
                        }
                    }
                }
            }
            & when (@prop = leave-animation-name) {
                &.plat-animated {
                    .plat-listview-viewport {
                        .plat-scroll-container {
                            .plat-container {
                                .plat-leave {
                                    .animation-name(@value);
                                }
                            }
                        }
                    }
                }
            }
            & when (@prop = leave-animation-duration) {
                &.plat-animated {
                    .plat-listview-viewport {
                        .plat-scroll-container {
                            .plat-container {
                                .plat-leave {
                                    .animation-duration(@value);
                                }
                            }
                        }
                    }
                }
            }
            & when (@prop = manipulated-viewport-background-color) {
                .plat-listview-viewport {
                    &.plat-manipulation-prep {
                        background-color: @value;
                    }
                }
            }
            & when (@prop = refresh-transition-time) {
                .plat-listview-viewport {
                    &.plat-transition-init {
                        .transition-duration(@value);
                    }
                }
            }
            & when (@prop = enter-init) {
                &.plat-animated {
                    .plat-listview-viewport {
                        .plat-scroll-container {
                            .plat-container {
                                .plat-enter-init {
                                    @value();
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    #controls {
        /// =========== Variable Listview Styles =========== ///

        .plat-listview(@prop: undefined; @value: undefined) {
            #platui > #mixins;

            & when (@prop = undefined), (value = undefined) {
                .plat-listview-viewport {
                    &.plat-manipulation-prep {
                        background-color: @manipulated-viewport-background-color;
                    }

                    &.plat-transition-init {
                        .transition-duration(@refresh-transition-time);
                    }
                }

                &.plat-animated {
                    .plat-listview-viewport {
                        .plat-scroll-container {
                            .plat-container {
                                .plat-enter-init {
                                    @enter-init();
                                }

                                .plat-enter {
                                    .animation-name(@enter-animation-name);
                                    .animation-duration(@enter-animation-duration);
                                }

                                .plat-leave {
                                    .animation-name(@leave-animation-name);
                                    .animation-duration(@leave-animation-duration);
                                }
                            }
                        }
                    }
                }
            }
            & when (@prop = enter-animation-name) {
                &.plat-animated {
                    .plat-listview-viewport {
                        .plat-scroll-container {
                            .plat-container {
                                .plat-enter {
                                    .animation-name(@value);
                                }
                            }
                        }
                    }
                }
            }
            & when (@prop = enter-animation-duration) {
                &.plat-animated {
                    .plat-listview-viewport {
                        .plat-scroll-container {
                            .plat-container {
                                .plat-enter {
                                    .animation-duration(@value);
                                }
                            }
                        }
                    }
                }
            }
            & when (@prop = leave-animation-name) {
                &.plat-animated {
                    .plat-listview-viewport {
                        .plat-scroll-container {
                            .plat-container {
                                .plat-leave {
                                    .animation-name(@value);
                                }
                            }
                        }
                    }
                }
            }
            & when (@prop = leave-animation-duration) {
                &.plat-animated {
                    .plat-listview-viewport {
                        .plat-scroll-container {
                            .plat-container {
                                .plat-leave {
                                    .animation-duration(@value);
                                }
                            }
                        }
                    }
                }
            }
            & when (@prop = manipulated-viewport-background-color) {
                .plat-listview-viewport {
                    &.plat-manipulation-prep {
                        background-color: @value;
                    }
                }
            }
            & when (@prop = refresh-transition-time) {
                .plat-listview-viewport {
                    &.plat-transition-init {
                        .transition-duration(@value);
                    }
                }
            }
            & when (@prop = enter-init) {
                &.plat-animated {
                    .plat-listview-viewport {
                        .plat-scroll-container {
                            .plat-container {
                                .plat-enter-init {
                                    @value();
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

#platui {
    #Modal {
        #dependencies {
           #platui > #variables;
	       @prompt-background-color: @pale-grey;
           @transition-time: 500ms;
           @fade-transition-time: 300ms;
        }

        #platui > #Modal > #dependencies;

    /// =========== Modal Colors =========== ///

        @color: @default-font-color;
        @backdrop-color: @transparent;
        @background-color: @white;

    /// =========== Modal Sizes =========== ///

        #custom-height {
            @height: 50%;
            @y-offset: 0%;
        }

        #custom-width {
            @width: 50%;
            @x-offset: 0%;
        }

        #custom {
            @width: 50%;
            @height: 50%;
            @x-offset: 0%;
            @y-offset: 0%;
        }

    /// =========== Modal Transitions =========== ///

        @left-transition: right @transition-time;
        @right-transition: left @transition-time;
        @up-transition: bottom @transition-time;
        @down-transition: top @transition-time;
        @fade-transition: opacity @fade-transition-time;

    /// =========== Modal Prompt =========== ///

	    @prompt-top: 20%;
        @prompt-width: 80%;
        @prompt-max-width: 30em;
        @prompt-backdrop-color: rgba(0,0,0,0.6);
        @prompt-title-color: @prompt-background-color;
        @prompt-title-background-color: @primary-color;
        @prompt-body-background-color: @prompt-background-color;
        @prompt-action-background-color: @prompt-background-color;
	    @prompt-accent-color: darken(@prompt-background-color, 5%);
	    @prompt-border-radius: 8px;
        @prompt-up-transition: top @transition-time;

    /// =========== Variable Modal Styles =========== ///

        .plat-modal(@prop; @value) {
            #platui > #mixins;

            & when (@prop = transition-time) {
                .plat-modal-container {
                    &.plat-modal-transition {
                        &.plat-down
                        &.plat-up,
                        &.plat-left,
                        &.plat-right {
                            .transition-duration(@value);
                        }
                    }
                }
            }
            & when (@prop = fade-transition-time) {
                .plat-modal-container {
                    &.plat-modal-transition {
                        &.plat-fade {
                            .transition-duration(@value);
                        }
                    }
                }
            }
            & when (@prop = left-transition) {
                .plat-modal-container {
                    &.plat-modal-transition {
                        &.plat-left {
                            .transition(@value);
                        }
                    }
                }
            }
            & when (@prop = right-transition) {
                .plat-modal-container {
                    &.plat-modal-transition {
                        &.plat-right {
                            .transition(@value);
                        }
                    }
                }
            }
            & when (@prop = up-transition) {
                .plat-modal-container {
                    &.plat-modal-transition {
                        &.plat-up {
                            .transition(@value);
                        }
                    }
                }
            }
            & when (@prop = down-transition) {
                .plat-modal-container {
                    &.plat-modal-transition {
                        &.plat-down {
                            .transition(@value);
                        }
                    }
                }
            }
            & when (@prop = fade-transition) {
                .plat-modal-container {
                    &.plat-modal-transition {
                        &.plat-fade {
                            .transition(@value);
                        }
                    }
                }
            }
            & when (@prop = color) {
                .plat-modal-container {
                    color: @value;
                }
            }
            & when (@prop = backdrop-color) {
                background-color: @value;
            }
            & when (@prop = background-color) {
                .plat-modal-container {
                    background-color: @value;
                }
            }
            & when (@prop = custom-height_height) {
                &.modal-custom-height {
                    .plat-modal-container {
                        height: @value;
                    }
                }
            }
            & when (@prop = custom-height_y-offset) {
                &.modal-custom-height {
                    .plat-modal-container {
                        &.plat-no-transition,
                        &.plat-modal-transition.plat-fade {
                            top: @value;
                        }

                        &.plat-modal-transition {
                            &.plat-right {
                                top: @value;
                            }

                            &.plat-left {
                                top: @value;
                            }

                            &.plat-down {
                                &.plat-activate {
                                    top: @value;
                                }
                            }

                            &.plat-up {
                                &.plat-activate {
                                    bottom: @value;
                                }
                            }
                        }
                    }
                }
            }
            & when (@prop = custom-width_width) {
                &.modal-custom-width {
                    .plat-modal-container {
                        width: @value;
                    }
                }
            }
            & when (@prop = custom-width_x-offset) {
                &.modal-custom-width {
                    .plat-modal-container {
                        &.plat-no-transition,
                        &.plat-modal-transition.plat-fade {
                            left: @value;
                        }

                        &.plat-modal-transition {
                            &.plat-right {
                                &.plat-activate {
                                    left: @value;
                                }
                            }

                            &.plat-left {
                                &.plat-activate {
                                    right: @value;
                                }
                            }

                            &.plat-down {
                                left: @value;
                            }

                            &.plat-up {
                                left: @value;
                            }
                        }
                    }
                }
            }
            & when (@prop = custom_width) {
                &.modal-custom {
                    .plat-modal-container {
                        width: @value;

                        &.plat-modal-transition {
                            &.plat-left {
                                right: -@value;
                            }
                        }
                    }
                }
            }
            & when (@prop = custom_height) {
                &.modal-custom {
                    .plat-modal-container {
                        height: @value;

                        &.plat-modal-transition {
                            &.plat-down {
                                top: -@value;
                            }

                            &.plat-up {
                                bottom: -@value;
                            }
                        }
                    }
                }
            }
            & when (@prop = custom_x-offset) {
                &.modal-custom {
                    .plat-modal-container {
                        &.plat-no-transition,
                        &.plat-modal-transition.plat-fade {
                            left: @value;
                        }

                        &.plat-modal-transition {
                            .plat-right {
                                left: -@value;

                                &.plat-activate {
                                    left: @value;
                                }
                            }

                            &.plat-left {
                                &.plat-activate {
                                    right: @value;
                                }
                            }

                            &.plat-down {
                                left: @value;
                            }

                            &.plat-up {
                                left: @value;
                            }
                        }
                    }
                }
            }
            & when (@prop = custom_y-offset) {
                &.modal-custom {
                    .plat-modal-container {
                        &.plat-no-transition,
                        &.plat-modal-transition.plat-fade {
                            top: @value;
                        }

                        &.plat-modal-transition {
                            .plat-right {
                                top: @value;
                            }

                            &.plat-left {
                                top: @value;
                            }

                            &.plat-down {
                                &.plat-activate {
                                    top: @value;
                                }
                            }

                            &.plat-up {
                                &.plat-activate {
                                    bottom: @value;
                                }
                            }
                        }
                    }
                }
            }
        }

    /// =========== Variable Modal Prompt Styles =========== ///

        .plat-modal-prompt(@prop; @value) {
            #platui > #mixins;

            & when (@prop = color) {
                .plat-modal-container {
                    color: @value;

                    .prompt-action {
                        &.button-group {
                            & > button {
                                color: lighten(@value, 20%);

                                &.button-suggested {
                                    color: @value;
                                }
                            }
                        }
                    }
                }
            }
            & when (@prop = prompt-top) {
                .plat-modal-container {
                    &.plat-no-transition,
                    &.plat-modal-transition.plat-fade,
                    &.plat-modal-transition.plat-right,
                    &.plat-modal-transition.plat-left {
                        top: @value;
                    }

                    &.plat-modal-transition {
                        &.plat-down {
                            &.plat-activate {
                                top: @value;
                            }
                        }

                        &.plat-up {
                            &.plat-activate {
                                top: @value;
                            }
                        }
                    }
                }
            }
            & when (@prop = prompt-width) {
                .plat-modal-container {
                    width: @value;
                }
            }
            & when (@prop = prompt-max-width) {
                .plat-modal-container {
                    max-width: @value;
                }
            }
            & when (@prop = prompt-backdrop-color) {
                background-color: @prompt-backdrop-color;
            }
            & when (@prop = prompt-title-color) {
                .plat-modal-container {
                    .prompt-title {
                        color: @value;
                    }
                }
            }
            & when (@prop = prompt-title-background-color) {
                .plat-modal-container {
                    .prompt-title {
                        background-color: @value;
                    }
                }
            }
            & when (@prop = prompt-body-background-color) {
                .plat-modal-container {
                    .prompt-body {
                        background-color: @prompt-body-background-color;
                    }
                }
            }
            & when (@prop = prompt-action-background-color) {
                .plat-modal-container {
                    .prompt-action {
                        background-color: @value;

                        &.button-group {
                            & > button {
                                &:active {
                                    background-color: darken(@value, 10%);
                                }
                            }
                        }
                    }
                }
            }
            & when (@prop = prompt-accent-color) {
                .plat-modal-container {
                    .prompt-title {
                        border-bottom-color: @value;
                    }

                    .prompt-action {
                        &.button-group {
                            & > button {
                                border-top-color: @value;

                                &:not(:first-child) {
                                    border-left-color: @value;
                                }
                            }
                        }
                    }
                }
            }
            & when (@prop = prompt-border-radius) {
                .plat-modal-container {
                    .border-radius(@value);
                }
            }
            & when (@prop = prompt-up-transition) {
                .plat-modal-container {
                    &.plat-modal-transition {
                        &.plat-up {
                            .transition(@value);
                        }
                    }
                }
            }
        }
    }

    #controls {
        /// =========== Variable Modal Styles =========== ///

        .plat-modal(@prop: undefined; @value: undefined) {
            #platui > #mixins;

            & when (@prop = undefined), (@value = undefined) {
                background-color: @backdrop-color;

                .plat-modal-container {
                    background-color: @background-color;
                    color: @color;

                    &.plat-modal-transition {
                        &.plat-right {
                            .transition(@right-transition);
                        }

                        &.plat-left {
                            .transition(@left-transition);
                        }

                        &.plat-down {
                            .transition(@down-transition);
                        }

                        &.plat-up {
                            .transition(@up-transition);
                        }

                        &.plat-fade {
                            .transition(@fade-transition);
                        }
                    }
                }

                &.modal-custom-width {
                    #platui > #Modal > #custom-width;

                    .plat-modal-container {
                        width: @width;

                        &.plat-no-transition,
                        &.plat-modal-transition.plat-fade {
                            left: @x-offset;
                        }

                        &.plat-modal-transition {
                            &.plat-right {
                                &.plat-activate {
                                    left: @x-offset;
                                }
                            }

                            &.plat-left {
                                &.plat-activate {
                                    right: @x-offset;
                                }
                            }

                            &.plat-down {
                                left: @x-offset;
                            }

                            &.plat-up {
                                left: @x-offset;
                            }
                        }
                    }
                }

                &.modal-custom-height {
                    #platui > #Modal > #custom-height;

                    .plat-modal-container {
                        height: @height;

                        &.plat-no-transition,
                        &.plat-modal-transition.plat-fade {
                            top: @y-offset;
                        }

                        &.plat-modal-transition {
                            &.plat-right {
                                top: @y-offset;
                            }

                            &.plat-left {
                                top: @y-offset;
                            }

                            &.plat-down {
                                &.plat-activate {
                                    top: @y-offset;
                                }
                            }

                            &.plat-up {
                                &.plat-activate {
                                    bottom: @y-offset;
                                }
                            }
                        }
                    }
                }

                &.modal-custom {
                    #platui > #Modal > #custom;

                    .plat-modal-container {
                        width: @width;
                        height: @height;

                        &.plat-no-transition,
                        &.plat-modal-transition.plat-fade {
                            top: @y-offset;
                            left: @x-offset;
                        }

                        &.plat-modal-transition {
                            .plat-right {
                                top: @y-offset;
                                left: -@x-offset;

                                &.plat-activate {
                                    left: @x-offset;
                                }
                            }

                            &.plat-left {
                                top: @y-offset;
                                right: -@width;

                                &.plat-activate {
                                    right: @x-offset;
                                }
                            }

                            &.plat-down {
                                top: -@height;
                                left: @x-offset;

                                &.plat-activate {
                                    top: @y-offset;
                                }
                            }

                            &.plat-up {
                                bottom: -@height;
                                left: @x-offset;

                                &.plat-activate {
                                    bottom: @y-offset;
                                }
                            }
                        }
                    }
                }
            }
            & when (@prop = transition-time) {
                .plat-modal-container {
                    &.plat-modal-transition {
                        &.plat-down
                        &.plat-up,
                        &.plat-left,
                        &.plat-right {
                            .transition-duration(@value);
                        }
                    }
                }
            }
            & when (@prop = fade-transition-time) {
                .plat-modal-container {
                    &.plat-modal-transition {
                        &.plat-fade {
                            .transition-duration(@value);
                        }
                    }
                }
            }
            & when (@prop = left-transition) {
                .plat-modal-container {
                    &.plat-modal-transition {
                        &.plat-left {
                            .transition(@value);
                        }
                    }
                }
            }
            & when (@prop = right-transition) {
                .plat-modal-container {
                    &.plat-modal-transition {
                        &.plat-right {
                            .transition(@value);
                        }
                    }
                }
            }
            & when (@prop = up-transition) {
                .plat-modal-container {
                    &.plat-modal-transition {
                        &.plat-up {
                            .transition(@value);
                        }
                    }
                }
            }
            & when (@prop = down-transition) {
                .plat-modal-container {
                    &.plat-modal-transition {
                        &.plat-down {
                            .transition(@value);
                        }
                    }
                }
            }
            & when (@prop = fade-transition) {
                .plat-modal-container {
                    &.plat-modal-transition {
                        &.plat-fade {
                            .transition(@value);
                        }
                    }
                }
            }
            & when (@prop = color) {
                .plat-modal-container {
                    color: @value;
                }
            }
            & when (@prop = backdrop-color) {
                background-color: @value;
            }
            & when (@prop = background-color) {
                .plat-modal-container {
                    background-color: @value;
                }
            }
            & when (@prop = custom-height_height) {
                &.modal-custom-height {
                    .plat-modal-container {
                        height: @value;
                    }
                }
            }
            & when (@prop = custom-height_y-offset) {
                &.modal-custom-height {
                    .plat-modal-container {
                        &.plat-no-transition,
                        &.plat-modal-transition.plat-fade {
                            top: @value;
                        }

                        &.plat-modal-transition {
                            &.plat-right {
                                top: @value;
                            }

                            &.plat-left {
                                top: @value;
                            }

                            &.plat-down {
                                &.plat-activate {
                                    top: @value;
                                }
                            }

                            &.plat-up {
                                &.plat-activate {
                                    bottom: @value;
                                }
                            }
                        }
                    }
                }
            }
            & when (@prop = custom-width_width) {
                &.modal-custom-width {
                    .plat-modal-container {
                        width: @value;
                    }
                }
            }
            & when (@prop = custom-width_x-offset) {
                &.modal-custom-width {
                    .plat-modal-container {
                        &.plat-no-transition,
                        &.plat-modal-transition.plat-fade {
                            left: @value;
                        }

                        &.plat-modal-transition {
                            &.plat-right {
                                &.plat-activate {
                                    left: @value;
                                }
                            }

                            &.plat-left {
                                &.plat-activate {
                                    right: @value;
                                }
                            }

                            &.plat-down {
                                left: @value;
                            }

                            &.plat-up {
                                left: @value;
                            }
                        }
                    }
                }
            }
            & when (@prop = custom_width) {
                &.modal-custom {
                    .plat-modal-container {
                        width: @value;

                        &.plat-modal-transition {
                            &.plat-left {
                                right: -@value;
                            }
                        }
                    }
                }
            }
            & when (@prop = custom_height) {
                &.modal-custom {
                    .plat-modal-container {
                        height: @value;

                        &.plat-modal-transition {
                            &.plat-down {
                                top: -@value;
                            }

                            &.plat-up {
                                bottom: -@value;
                            }
                        }
                    }
                }
            }
            & when (@prop = custom_x-offset) {
                &.modal-custom {
                    .plat-modal-container {
                        &.plat-no-transition,
                        &.plat-modal-transition.plat-fade {
                            left: @value;
                        }

                        &.plat-modal-transition {
                            .plat-right {
                                left: -@value;

                                &.plat-activate {
                                    left: @value;
                                }
                            }

                            &.plat-left {
                                &.plat-activate {
                                    right: @value;
                                }
                            }

                            &.plat-down {
                                left: @value;
                            }

                            &.plat-up {
                                left: @value;
                            }
                        }
                    }
                }
            }
            & when (@prop = custom_y-offset) {
                &.modal-custom {
                    .plat-modal-container {
                        &.plat-no-transition,
                        &.plat-modal-transition.plat-fade {
                            top: @value;
                        }

                        &.plat-modal-transition {
                            .plat-right {
                                top: @value;
                            }

                            &.plat-left {
                                top: @value;
                            }

                            &.plat-down {
                                &.plat-activate {
                                    top: @value;
                                }
                            }

                            &.plat-up {
                                &.plat-activate {
                                    bottom: @value;
                                }
                            }
                        }
                    }
                }
            }
        }

    /// =========== Variable Modal Prompt Styles =========== ///

        .plat-modal-prompt(@prop: undefined; @value: undefined) {
            #platui > #mixins;

            & when (@prop = undefined), (@value = undefined) {
                background-color: @prompt-backdrop-color;

                .plat-modal-container {
                    .border-radius(@prompt-border-radius);
                    width: @prompt-width;
                    max-width: @prompt-max-width;
                    // need this here for strange painting issue with prompt title and border-radius
                    background-color: @prompt-title-background-color;

                    &.plat-no-transition,
                    &.plat-modal-transition.plat-fade,
                    &.plat-modal-transition.plat-right,
                    &.plat-modal-transition.plat-left {
                        top: @prompt-top;
                    }

                    &.plat-modal-transition {
                        &.plat-down {
                            &.plat-activate {
                                top: @prompt-top;
                            }
                        }

                        &.plat-up {
                            .transition(@prompt-up-transition);

                            &.plat-activate {
                                top: @prompt-top;
                            }
                        }
                    }

                    .prompt-title {
                        border-bottom-color: @prompt-accent-color;
                        color: @prompt-title-color;
                        background-color: @prompt-title-background-color;
                    }

                    .prompt-body {
                        background-color: @prompt-body-background-color;
                    }

                    .prompt-action {
                        background-color: @prompt-action-background-color;

                        &.button-group {
                            & > button {
                                border-top-color: @prompt-accent-color;
                                color: lighten(@color, 20%);

                                &:not(:first-child) {
                                    border-left-color: @prompt-accent-color;
                                }

                                &:active {
                                    background-color: darken(@prompt-action-background-color, 10%);
                                }

                                &.button-suggested {
                                    color: @color;
                                }
                            }
                        }
                    }
                }
            }
            & when (@prop = color) {
                .plat-modal-container {
                    color: @value;

                    .prompt-action {
                        &.button-group {
                            & > button {
                                color: lighten(@value, 20%);

                                &.button-suggested {
                                    color: @value;
                                }
                            }
                        }
                    }
                }
            }
            & when (@prop = prompt-top) {
                .plat-modal-container {
                    &.plat-no-transition,
                    &.plat-modal-transition.plat-fade,
                    &.plat-modal-transition.plat-right,
                    &.plat-modal-transition.plat-left {
                        top: @value;
                    }

                    &.plat-modal-transition {
                        &.plat-down {
                            &.plat-activate {
                                top: @value;
                            }
                        }

                        &.plat-up {
                            &.plat-activate {
                                top: @value;
                            }
                        }
                    }
                }
            }
            & when (@prop = prompt-width) {
                .plat-modal-container {
                    width: @value;
                }
            }
            & when (@prop = prompt-max-width) {
                .plat-modal-container {
                    max-width: @value;
                }
            }
            & when (@prop = prompt-backdrop-color) {
                background-color: @prompt-backdrop-color;
            }
            & when (@prop = prompt-title-color) {
                .plat-modal-container {
                    .prompt-title {
                        color: @value;
                    }
                }
            }
            & when (@prop = prompt-title-background-color) {
                .plat-modal-container {
                    .prompt-title {
                        background-color: @value;
                    }
                }
            }
            & when (@prop = prompt-body-background-color) {
                .plat-modal-container {
                    .prompt-body {
                        background-color: @prompt-body-background-color;
                    }
                }
            }
            & when (@prop = prompt-action-background-color) {
                .plat-modal-container {
                    .prompt-action {
                        background-color: @value;

                        &.button-group {
                            & > button {
                                &:active {
                                    background-color: darken(@value, 10%);
                                }
                            }
                        }
                    }
                }
            }
            & when (@prop = prompt-accent-color) {
                .plat-modal-container {
                    .prompt-title {
                        border-bottom-color: @value;
                    }

                    .prompt-action {
                        &.button-group {
                            & > button {
                                border-top-color: @value;

                                &:not(:first-child) {
                                    border-left-color: @value;
                                }
                            }
                        }
                    }
                }
            }
            & when (@prop = prompt-border-radius) {
                .plat-modal-container {
                    .border-radius(@value);
                }
            }
            & when (@prop = prompt-up-transition) {
                .plat-modal-container {
                    &.plat-modal-transition {
                        &.plat-up {
                            .transition(@value);
                        }
                    }
                }
            }
        }
    }
}

#platui {
    #Navbar {
        #platui > #variables;

    /// =========== Navbar Colors =========== ///

        @background-color: @primary-color;
        @color: @white;

    /// =========== Navbar Dimensions =========== ///

        @height: 4em;
        @z-index: 100;
        @left-percentage: 100% / 3;
        @center-percentage: 100% / 3;
        @right-percentage: 100% / 3;
        @padding: 0;
        @item-padding: 0 1.5em;

    /// =========== Navbar Properties =========== ///

        @font-size: 125%;
        @border-top: none;
        @border-right: none;
        @border-bottom: none;
        @border-left: none;
        @box-shadow: 0px 0px 2px 1px lighten(@black, 10%);

    /// =========== Variable Navbar Styles =========== ///

        .plat-navbar(@prop; @value) {
            #platui > #mixins;

            & when (@prop = background-color) {
                background-color: @value;
            }
            & when (@prop = color) {
                color: @value;
            }
            & when (@prop = height) {
                height: @value;
            }
            & when (@prop = z-index) {
                z-index: @value;
            }
            & when (@prop = padding) {
                padding: @value;
            }
            & when (@prop = border-top) {
                border-top: @value;
            }
            & when (@prop = border-right) {
                border-right: @value;
            }
            & when (@prop = border-bottom) {
                border-bottom: @value;
            }
            & when (@prop = border-left) {
                border-left: @value;
            }
            & when (@prop = left-percentage) {
                .plat-navbar-left {
                    width: @value;
                }
            }
            & when (@prop = center-percentage) {
                .plat-navbar-center {
                    width: @value;
                }
            }
            & when (@prop = right-percentage) {
                .plat-navbar-right {
                    width: @value;
                }
            }
            & when (@prop = item-padding) {
                .plat-navbar-item {
                    padding: @value;
                }
            }
            & when (@prop = font-size) {
                .plat-navbar-left,
                .plat-navbar-center,
                .plat-navbar-right {
                    font-size: @value;
                }
            }
            & when (@prop = box-shadow) {
                &:not(.no-navbar-shadow) {
                    .box-shadow(@value);
                }
            }
        }
    }

    #controls {
        /// =========== Variable Navbar Styles =========== ///

        .plat-navbar(@prop: undefined; @value: undefined) {
            #platui > #mixins;

            & when (@prop = undefined), (@value = undefined) {
                height: @height;
                background-color: @background-color;
                color: @color;
                padding: @padding;
                border-top: @border-top;
                border-right: @border-right;
                border-bottom: @border-bottom;
                border-left: @border-left;
                z-index: @z-index;

                &:not(.navbar-no-shadow) {
                    .box-shadow(@box-shadow);
                }

                .plat-navbar-left,
                .plat-navbar-center,
                .plat-navbar-right {
                    font-size: @font-size;
                }

                .plat-navbar-item {
                    padding: @item-padding;
                }

                .plat-navbar-left {
                    width: @left-percentage;
                }

                .plat-navbar-center {
                    width: @center-percentage;
                }

                .plat-navbar-right {
                    width: @right-percentage;
                }
            }
            & when (@prop = background-color) {
                background-color: @value;
            }
            & when (@prop = color) {
                color: @value;
            }
            & when (@prop = height) {
                height: @value;
            }
            & when (@prop = z-index) {
                z-index: @value;
            }
            & when (@prop = padding) {
                padding: @value;
            }
            & when (@prop = border-top) {
                border-top: @value;
            }
            & when (@prop = border-right) {
                border-right: @value;
            }
            & when (@prop = border-bottom) {
                border-bottom: @value;
            }
            & when (@prop = border-left) {
                border-left: @value;
            }
            & when (@prop = left-percentage) {
                .plat-navbar-left {
                    width: @value;
                }
            }
            & when (@prop = center-percentage) {
                .plat-navbar-center {
                    width: @value;
                }
            }
            & when (@prop = right-percentage) {
                .plat-navbar-right {
                    width: @value;
                }
            }
            & when (@prop = item-padding) {
                .plat-navbar-item {
                    padding: @value;
                }
            }
            & when (@prop = font-size) {
                .plat-navbar-left,
                .plat-navbar-center,
                .plat-navbar-right {
                    font-size: @value;
                }
            }
            & when (@prop = box-shadow) {
                &:not(.no-navbar-shadow) {
                    .box-shadow(@value);
                }
            }
        }
    }
}

#platui {
    #ProgressBar {
        #platui > #variables;

    /// =========== Progress Bar Colors =========== ///

        @fill-color: darken(@neutral-color, 10%);
        @empty-color: lighten(@neutral-color, 10%);

    /// =========== Progress Bar Properties =========== ///

        @height: 0.5em;
        @border: none;
        @border-radius: 8px;
        @fill-radius: 4px;

    /// =========== Progress Bar Transition =========== ///

        @transition-time: 0s;
        @transition-function: linear;

    /// =========== Variable Progress Bar Styles =========== ///

        .plat-progress(@prop; @value) {
            #platui > #mixins;

            & when (@prop = fill-color) {
                .plat-progress-container {
                    .plat-animated-bar {
                        background-color: @value;
                    }
                }
            }
            & when (@prop = empty-color) {
                .plat-progress-container {
                    background-color: @value;
                }
            }
            & when (@prop = height) {
                .plat-progress-container {
                    height: @value;
                }
            }
            & when (@prop = border) {
                .plat-progress-container {
                    border: @value;
                }
            }
            & when (@prop = border-radius) {
                .plat-progress-container {
                    .border-radius(@value);
                }
            }
            & when (@prop = fill-radius) {
                .plat-progress-container {
                    .plat-animated-bar {
                        .border-radius(@value);
                    }
                }
            }
            & when (@prop = transition-time) {
                .plat-progress-container {
                    .plat-animated-bar {
                        &.plat-transition-init {
                            .transition-duration(@value);
                        }
                    }
                }
            }
            & when (@prop = transition-function) {
                .plat-progress-container {
                    .plat-animated-bar {
                        &.plat-transition-init {
                            .transition-timing-function(@value);
                        }
                    }
                }
            }
        }
    }

    #controls {
        /// =========== Variable Progress Bar Styles =========== ///

        .plat-progress(@prop: undefined; @value: undefined) {
            #platui > #mixins;

            & when (@prop = undefined), (@value = undefined) {
                .plat-progress-container {
                    .border-radius(@border-radius);
                    height: @height;
                    background-color: @empty-color;
                    border: @border;

                    .plat-animated-bar {
                        .border-radius(@fill-radius);
                        background-color: @fill-color;

                        &.plat-transition-init {
                            .transition-duration(@transition-time);
                            .transition-timing-function(@transition-function);
                        }
                    }
                }
            }
            & when (@prop = fill-color) {
                .plat-progress-container {
                    .plat-animated-bar {
                        background-color: @value;
                    }
                }
            }
            & when (@prop = empty-color) {
                .plat-progress-container {
                    background-color: @value;
                }
            }
            & when (@prop = height) {
                .plat-progress-container {
                    height: @value;
                }
            }
            & when (@prop = border) {
                .plat-progress-container {
                    border: @value;
                }
            }
            & when (@prop = border-radius) {
                .plat-progress-container {
                    .border-radius(@value);
                }
            }
            & when (@prop = fill-radius) {
                .plat-progress-container {
                    .plat-animated-bar {
                        .border-radius(@value);
                    }
                }
            }
            & when (@prop = transition-time) {
                .plat-progress-container {
                    .plat-animated-bar {
                        &.plat-transition-init {
                            .transition-duration(@value);
                        }
                    }
                }
            }
            & when (@prop = transition-function) {
                .plat-progress-container {
                    .plat-animated-bar {
                        &.plat-transition-init {
                            .transition-timing-function(@value);
                        }
                    }
                }
            }
        }
    }
}

#platui {
    #ProgressRing {
        #platui > #variables;

    /// =========== Progress Ring Colors =========== ///

        @color: @primary-color;

    /// =========== Progress Ring Sizes =========== ///

        @diameter: 3em;

    /// =========== Progress Ring Animation =========== ///

        @spin-animation-name: PLAT-SPIN;
        @fade-delay-animation-name: PLAT-FADE-DELAY;
        @spin-frequency: 750ms;

    /// =========== Progress Ring Animation Mixins =========== ///

        .spin(@name) {
            #platui > #animations > .keyframes(@name);
            .frames(@prefix) {
                #platui > #mixins;
                from {
                    .transform(rotate(0deg); @prefix);
                }
                to {
                    .transform(rotate(359deg); @prefix);
                }
            }
        }

        .fade-delay(@name) {
            #platui > #animations > .keyframes(@name);
            .frames(@prefix) {
                0%, 39%, 100% { opacity: 0; }
                40% { opacity: 1; }
            }
        }

    /// =========== Variable Progress Ring Styles =========== ///

        .plat-ring(@prop; @value) {
            #platui > #mixins;

            & when (@prop = color) {
                @fill-color: fade(@value, 80%);
                @unfilled-color-0: fade(@value, 10%);
                @unfilled-color-1: fade(@value, 15%);

                &.plat-ring-0 {
                    .plat-animated-ring {
                        border-left-color: @fill-color;
                        border-top-color: @unfilled-color-0;
                        border-right-color: @unfilled-color-0;
                        border-bottom-color: @unfilled-color-0;
                    }
                }

                &.plat-ring-1 {
                    .plat-animated-ring {
                        .plat-animated-child-0::before {
                            background-color: fade(@value, 75%);
                        }

                        .plat-animated-child-0::after {
                            background-color: fade(@value, 60%);
                        }

                        .plat-animated-child-1::before {
                            background-color: fade(@value, 45%);
                        }

                        .plat-animated-child-1::after {
                            background-color: fade(@value, 30%);
                        }

                        .plat-animated-child-2::before {
                            background-color: @unfilled-color-1;
                        }

                        .plat-animated-child-2::after {
                            background-color: @unfilled-color-1;
                        }

                        .plat-animated-child-3::before {
                            background-color: @unfilled-color-1;
                        }

                        .plat-animated-child-3::after {
                            background-color: @unfilled-color-1;
                        }
                    }
                }

                &.plat-ring-2 {
                    .plat-animated-ring {
                        .plat-animated-child {
                            &::before {
                                background-color: @fill-color;
                            }
                        }
                    }
                }
            }
            & when (@prop = diameter) {
                @thickness: @value / 10;

                width: @value;
                height: @value;

                &.plat-ring-0 {
                    .plat-animated-ring {
                        border-width: @thickness;
                    }
                }
            }
            & when (@prop = spin-animation-name) {
                &.plat-ring-0 {
                    .plat-animated-ring {
                        .animation-name(@value);
                    }
                }

                &.plat-ring-1 {
                    .plat-animated-ring {
                        .animation-name(@value);
                    }
                }
            }
            & when (@prop = fade-delay-animation-name) {
                &.plat-ring-2 {
                    .plat-animated-ring {
                        .plat-animated-child {
                            &::before {
                                .animation-name(@value);
                            }
                        }
                    }
                }
            }
            & when (@prop = spin-frequency) {
                @delay-step: @spin-frequency / 12;

                &.plat-ring-0 {
                    .plat-animated-ring {
                        .animation-duration(@value);
                    }
                }

                &.plat-ring-1 {
                    .plat-animated-ring {
                        .animation-duration(@value);
                    }
                }

                &.plat-ring-2 {
                    .plat-animated-ring {
                        .plat-animated-child {
                            &::before {
                                .animation-duration(@value);
                            }
                        }

                        .plat-animated-child-1 {
                            &::before {
                                .animation-delay(-@value + @delay-step);
                            }
                        }

                        .plat-animated-child-2 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 2));
                            }
                        }

                        .plat-animated-child-3 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 3));
                            }
                        }

                        .plat-animated-child-4 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 4));
                            }
                        }

                        .plat-animated-child-5 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 5));
                            }
                        }

                        .plat-animated-child-6 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 6));
                            }
                        }

                        .plat-animated-child-7 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 7));
                            }
                        }

                        .plat-animated-child-8 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 8));
                            }
                        }

                        .plat-animated-child-9 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 9));
                            }
                        }

                        .plat-animated-child-10 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 10));
                            }
                        }

                        .plat-animated-child-11 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 11));
                            }
                        }
                    }
                }
            }
        }

    /// =========== Variable Progress Ring 0 Styles =========== ///

        .plat-ring-0(@prop; @value) {
            #platui > #mixins;

            & when (@prop = color) {
                @fill-color: fade(@value, 80%);
                @unfilled-color-0: fade(@value, 10%);

                &.plat-ring-0 {
                    .plat-animated-ring {
                        border-left-color: @fill-color;
                        border-top-color: @unfilled-color-0;
                        border-right-color: @unfilled-color-0;
                        border-bottom-color: @unfilled-color-0;
                    }
                }
            }
            & when (@prop = diameter) {
                @thickness: @value / 10;

                &.plat-ring-0 {
                    width: @value;
                    height: @value;

                    .plat-animated-ring {
                        border-width: @thickness;
                    }
                }
            }
            & when (@prop = spin-animation-name) {
                &.plat-ring-0 {
                    .plat-animated-ring {
                        .animation-name(@value);
                    }
                }
            }
            & when (@prop = spin-frequency) {
                &.plat-ring-0 {
                    .plat-animated-ring {
                        .animation-duration(@value);
                    }
                }
            }
        }

    /// =========== Variable Progress Ring 1 Styles =========== ///

        .plat-ring-1(@prop; @value) {
            #platui > #mixins;

            & when (@prop = color) {
                @unfilled-color-1: fade(@value, 15%);

                &.plat-ring-1 {
                    .plat-animated-ring {
                        .plat-animated-child-0::before {
                            background-color: fade(@value, 75%);
                        }

                        .plat-animated-child-0::after {
                            background-color: fade(@value, 60%);
                        }

                        .plat-animated-child-1::before {
                            background-color: fade(@value, 45%);
                        }

                        .plat-animated-child-1::after {
                            background-color: fade(@value, 30%);
                        }

                        .plat-animated-child-2::before {
                            background-color: @unfilled-color-1;
                        }

                        .plat-animated-child-2::after {
                            background-color: @unfilled-color-1;
                        }

                        .plat-animated-child-3::before {
                            background-color: @unfilled-color-1;
                        }

                        .plat-animated-child-3::after {
                            background-color: @unfilled-color-1;
                        }
                    }
                }
            }
            & when (@prop = diameter) {
                &.plat-ring-1 {
                    width: @value;
                    height: @value;
                }
            }
            & when (@prop = spin-animation-name) {
                &.plat-ring-1 {
                    .plat-animated-ring {
                        .animation-name(@value);
                    }
                }
            }
            & when (@prop = spin-frequency) {
                &.plat-ring-1 {
                    .plat-animated-ring {
                        .animation-duration(@value);
                    }
                }
            }
        }

    /// =========== Variable Progress Ring 2 Styles =========== ///

        .plat-ring-2(@prop; @value) {
            #platui > #mixins;

            & when (@prop = color) {
                @fill-color: fade(@value, 80%);

                &.plat-ring-2 {
                    .plat-animated-ring {
                        .plat-animated-child {
                            &::before {
                                background-color: @fill-color;
                            }
                        }
                    }
                }
            }
            & when (@prop = diameter) {
                &.plat-ring-2 {
                    width: @value;
                    height: @value;
                }
            }
            & when (@prop = fade-delay-animation-name) {
                &.plat-ring-2 {
                    .plat-animated-ring {
                        .plat-animated-child {
                            &::before {
                                .animation-name(@value);
                            }
                        }
                    }
                }
            }
            & when (@prop = spin-frequency) {
                @delay-step: @spin-frequency / 12;

                &.plat-ring-2 {
                    .plat-animated-ring {
                        .plat-animated-child {
                            &::before {
                                .animation-duration(@value);
                            }
                        }

                        .plat-animated-child-1 {
                            &::before {
                                .animation-delay(-@value + @delay-step);
                            }
                        }

                        .plat-animated-child-2 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 2));
                            }
                        }

                        .plat-animated-child-3 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 3));
                            }
                        }

                        .plat-animated-child-4 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 4));
                            }
                        }

                        .plat-animated-child-5 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 5));
                            }
                        }

                        .plat-animated-child-6 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 6));
                            }
                        }

                        .plat-animated-child-7 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 7));
                            }
                        }

                        .plat-animated-child-8 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 8));
                            }
                        }

                        .plat-animated-child-9 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 9));
                            }
                        }

                        .plat-animated-child-10 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 10));
                            }
                        }

                        .plat-animated-child-11 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 11));
                            }
                        }
                    }
                }
            }
        }
    }

    #controls {
        /// =========== Variable Progress Ring Styles =========== ///

        .plat-ring(@prop: undefined; @value: undefined) {
            #platui > #mixins;

            & when (@prop = undefined), (@value = undefined) {
                @fill-color: fade(@color, 80%);
                @unfilled-color-0: fade(@color, 10%);
                @unfilled-color-1: fade(@color, 15%);
                @thickness: @diameter / 10;
                @delay-step: @spin-frequency / 12;

                width: @diameter;
                height: @diameter;

                &.plat-ring-0 {
                    .plat-animated-ring {
                        .animation-name(@spin-animation-name);
                        .animation-duration(@spin-frequency);
                        border-width: @thickness;
                        border-left-color: @fill-color;
                        border-top-color: @unfilled-color-0;
                        border-right-color: @unfilled-color-0;
                        border-bottom-color: @unfilled-color-0;
                    }
                }

                &.plat-ring-1 {
                    .plat-animated-ring {
                        .animation-name(@spin-animation-name);
                        .animation-duration(@spin-frequency);

                        .plat-animated-child-0::before {
                            background-color: fade(@color, 75%);
                        }

                        .plat-animated-child-0::after {
                            background-color: fade(@color, 60%);
                        }

                        .plat-animated-child-1::before {
                            background-color: fade(@color, 45%);
                        }

                        .plat-animated-child-1::after {
                            background-color: fade(@color, 30%);
                        }

                        .plat-animated-child-2::before {
                            background-color: @unfilled-color-1;
                        }

                        .plat-animated-child-2::after {
                            background-color: @unfilled-color-1;
                        }

                        .plat-animated-child-3::before {
                            background-color: @unfilled-color-1;
                        }

                        .plat-animated-child-3::after {
                            background-color: @unfilled-color-1;
                        }
                    }
                }

                &.plat-ring-2 {
                    .plat-animated-ring {
                        .plat-animated-child {
                            &::before {
                                .animation-name(@fade-delay-animation-name);
                                .animation-duration(@spin-frequency);
                                background-color: @fill-color;
                            }
                        }

                        .plat-animated-child-1 {
                            &::before {
                                .animation-delay(-@spin-frequency + @delay-step);
                            }
                        }

                        .plat-animated-child-2 {
                            &::before {
                                .animation-delay(-@spin-frequency + (@delay-step * 2));
                            }
                        }

                        .plat-animated-child-3 {
                            &::before {
                                .animation-delay(-@spin-frequency + (@delay-step * 3));
                            }
                        }

                        .plat-animated-child-4 {
                            &::before {
                                .animation-delay(-@spin-frequency + (@delay-step * 4));
                            }
                        }

                        .plat-animated-child-5 {
                            &::before {
                                .animation-delay(-@spin-frequency + (@delay-step * 5));
                            }
                        }

                        .plat-animated-child-6 {
                            &::before {
                                .animation-delay(-@spin-frequency + (@delay-step * 6));
                            }
                        }

                        .plat-animated-child-7 {
                            &::before {
                                .animation-delay(-@spin-frequency + (@delay-step * 7));
                            }
                        }

                        .plat-animated-child-8 {
                            &::before {
                                .animation-delay(-@spin-frequency + (@delay-step * 8));
                            }
                        }

                        .plat-animated-child-9 {
                            &::before {
                                .animation-delay(-@spin-frequency + (@delay-step * 9));
                            }
                        }

                        .plat-animated-child-10 {
                            &::before {
                                .animation-delay(-@spin-frequency + (@delay-step * 10));
                            }
                        }

                        .plat-animated-child-11 {
                            &::before {
                                .animation-delay(-@spin-frequency + (@delay-step * 11));
                            }
                        }
                    }
                }
            }
            & when (@prop = color) {
                @fill-color: fade(@value, 80%);
                @unfilled-color-0: fade(@value, 10%);
                @unfilled-color-1: fade(@value, 15%);

                &.plat-ring-0 {
                    .plat-animated-ring {
                        border-left-color: @fill-color;
                        border-top-color: @unfilled-color-0;
                        border-right-color: @unfilled-color-0;
                        border-bottom-color: @unfilled-color-0;
                    }
                }

                &.plat-ring-1 {
                    .plat-animated-ring {
                        .plat-animated-child-0::before {
                            background-color: fade(@value, 75%);
                        }

                        .plat-animated-child-0::after {
                            background-color: fade(@value, 60%);
                        }

                        .plat-animated-child-1::before {
                            background-color: fade(@value, 45%);
                        }

                        .plat-animated-child-1::after {
                            background-color: fade(@value, 30%);
                        }

                        .plat-animated-child-2::before {
                            background-color: @unfilled-color-1;
                        }

                        .plat-animated-child-2::after {
                            background-color: @unfilled-color-1;
                        }

                        .plat-animated-child-3::before {
                            background-color: @unfilled-color-1;
                        }

                        .plat-animated-child-3::after {
                            background-color: @unfilled-color-1;
                        }
                    }
                }

                &.plat-ring-2 {
                    .plat-animated-ring {
                        .plat-animated-child {
                            &::before {
                                background-color: @fill-color;
                            }
                        }
                    }
                }
            }
            & when (@prop = diameter) {
                @thickness: @value / 10;

                width: @value;
                height: @value;

                &.plat-ring-0 {
                    .plat-animated-ring {
                        border-width: @thickness;
                    }
                }
            }
            & when (@prop = spin-animation-name) {
                &.plat-ring-0 {
                    .plat-animated-ring {
                        .animation-name(@value);
                    }
                }

                &.plat-ring-1 {
                    .plat-animated-ring {
                        .animation-name(@value);
                    }
                }
            }
            & when (@prop = fade-delay-animation-name) {
                &.plat-ring-2 {
                    .plat-animated-ring {
                        .plat-animated-child {
                            &::before {
                                .animation-name(@value);
                            }
                        }
                    }
                }
            }
            & when (@prop = spin-frequency) {
                @delay-step: @spin-frequency / 12;

                &.plat-ring-0 {
                    .plat-animated-ring {
                        .animation-duration(@value);
                    }
                }

                &.plat-ring-1 {
                    .plat-animated-ring {
                        .animation-duration(@value);
                    }
                }

                &.plat-ring-2 {
                    .plat-animated-ring {
                        .plat-animated-child {
                            &::before {
                                .animation-duration(@value);
                            }
                        }

                        .plat-animated-child-1 {
                            &::before {
                                .animation-delay(-@value + @delay-step);
                            }
                        }

                        .plat-animated-child-2 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 2));
                            }
                        }

                        .plat-animated-child-3 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 3));
                            }
                        }

                        .plat-animated-child-4 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 4));
                            }
                        }

                        .plat-animated-child-5 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 5));
                            }
                        }

                        .plat-animated-child-6 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 6));
                            }
                        }

                        .plat-animated-child-7 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 7));
                            }
                        }

                        .plat-animated-child-8 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 8));
                            }
                        }

                        .plat-animated-child-9 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 9));
                            }
                        }

                        .plat-animated-child-10 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 10));
                            }
                        }

                        .plat-animated-child-11 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 11));
                            }
                        }
                    }
                }
            }
        }

    /// =========== Variable Progress Ring 0 Styles =========== ///

        .plat-ring-0(@prop: undefined; @value: undefined) {
            #platui > #mixins;

            & when (@prop = undefined), (@value = undefined) {
                @fill-color: fade(@color, 80%);
                @unfilled-color-0: fade(@color, 10%);
                @thickness: @diameter / 10;

                &.plat-ring-0 {
                    width: @diameter;
                    height: @diameter;

                    .plat-animated-ring {
                        .animation-name(@spin-animation-name);
                        .animation-duration(@spin-frequency);
                        border-width: @thickness;
                        border-left-color: @fill-color;
                        border-top-color: @unfilled-color-0;
                        border-right-color: @unfilled-color-0;
                        border-bottom-color: @unfilled-color-0;
                    }
                }
            }
            & when (@prop = color) {
                @fill-color: fade(@value, 80%);
                @unfilled-color-0: fade(@value, 10%);

                &.plat-ring-0 {
                    .plat-animated-ring {
                        border-left-color: @fill-color;
                        border-top-color: @unfilled-color-0;
                        border-right-color: @unfilled-color-0;
                        border-bottom-color: @unfilled-color-0;
                    }
                }
            }
            & when (@prop = diameter) {
                @thickness: @value / 10;

                &.plat-ring-0 {
                    width: @value;
                    height: @value;

                    .plat-animated-ring {
                        border-width: @thickness;
                    }
                }
            }
            & when (@prop = spin-animation-name) {
                &.plat-ring-0 {
                    .plat-animated-ring {
                        .animation-name(@value);
                    }
                }
            }
            & when (@prop = spin-frequency) {
                &.plat-ring-0 {
                    .plat-animated-ring {
                        .animation-duration(@value);
                    }
                }
            }
        }

    /// =========== Variable Progress Ring 1 Styles =========== ///

        .plat-ring-1(@prop: undefined; @value: undefined) {
            #platui > #mixins;

            & when (@prop = undefined), (@value = undefined) {
                @unfilled-color-1: fade(@color, 15%);

                &.plat-ring-1 {
                    width: @diameter;
                    height: @diameter;

                    .plat-animated-ring {
                        .animation-name(@spin-animation-name);
                        .animation-duration(@spin-frequency);

                        .plat-animated-child-0::before {
                            background-color: fade(@color, 75%);
                        }

                        .plat-animated-child-0::after {
                            background-color: fade(@color, 60%);
                        }

                        .plat-animated-child-1::before {
                            background-color: fade(@color, 45%);
                        }

                        .plat-animated-child-1::after {
                            background-color: fade(@color, 30%);
                        }

                        .plat-animated-child-2::before {
                            background-color: @unfilled-color-1;
                        }

                        .plat-animated-child-2::after {
                            background-color: @unfilled-color-1;
                        }

                        .plat-animated-child-3::before {
                            background-color: @unfilled-color-1;
                        }

                        .plat-animated-child-3::after {
                            background-color: @unfilled-color-1;
                        }
                    }
                }
            }
            & when (@prop = color) {
                @unfilled-color-1: fade(@value, 15%);

                &.plat-ring-1 {
                    .plat-animated-ring {
                        .plat-animated-child-0::before {
                            background-color: fade(@value, 75%);
                        }

                        .plat-animated-child-0::after {
                            background-color: fade(@value, 60%);
                        }

                        .plat-animated-child-1::before {
                            background-color: fade(@value, 45%);
                        }

                        .plat-animated-child-1::after {
                            background-color: fade(@value, 30%);
                        }

                        .plat-animated-child-2::before {
                            background-color: @unfilled-color-1;
                        }

                        .plat-animated-child-2::after {
                            background-color: @unfilled-color-1;
                        }

                        .plat-animated-child-3::before {
                            background-color: @unfilled-color-1;
                        }

                        .plat-animated-child-3::after {
                            background-color: @unfilled-color-1;
                        }
                    }
                }
            }
            & when (@prop = diameter) {
                &.plat-ring-1 {
                    width: @value;
                    height: @value;
                }
            }
            & when (@prop = spin-animation-name) {
                &.plat-ring-1 {
                    .plat-animated-ring {
                        .animation-name(@value);
                    }
                }
            }
            & when (@prop = spin-frequency) {
                &.plat-ring-1 {
                    .plat-animated-ring {
                        .animation-duration(@value);
                    }
                }
            }
        }

    /// =========== Variable Progress Ring 2 Styles =========== ///

        .plat-ring-2(@prop: undefined; @value: undefined) {
            #platui > #mixins;

            & when (@prop = undefined), (@value = undefined) {
                @fill-color: fade(@color, 80%);
                @delay-step: @spin-frequency / 12;

                &.plat-ring-2 {
                    width: @diameter;
                    height: @diameter;

                    .plat-animated-ring {
                        .plat-animated-child {
                            &::before {
                                .animation-name(@fade-delay-animation-name);
                                .animation-duration(@spin-frequency);
                                background-color: @fill-color;
                            }
                        }

                        .plat-animated-child-1 {
                            &::before {
                                .animation-delay(-@spin-frequency + @delay-step);
                            }
                        }

                        .plat-animated-child-2 {
                            &::before {
                                .animation-delay(-@spin-frequency + (@delay-step * 2));
                            }
                        }

                        .plat-animated-child-3 {
                            &::before {
                                .animation-delay(-@spin-frequency + (@delay-step * 3));
                            }
                        }

                        .plat-animated-child-4 {
                            &::before {
                                .animation-delay(-@spin-frequency + (@delay-step * 4));
                            }
                        }

                        .plat-animated-child-5 {
                            &::before {
                                .animation-delay(-@spin-frequency + (@delay-step * 5));
                            }
                        }

                        .plat-animated-child-6 {
                            &::before {
                                .animation-delay(-@spin-frequency + (@delay-step * 6));
                            }
                        }

                        .plat-animated-child-7 {
                            &::before {
                                .animation-delay(-@spin-frequency + (@delay-step * 7));
                            }
                        }

                        .plat-animated-child-8 {
                            &::before {
                                .animation-delay(-@spin-frequency + (@delay-step * 8));
                            }
                        }

                        .plat-animated-child-9 {
                            &::before {
                                .animation-delay(-@spin-frequency + (@delay-step * 9));
                            }
                        }

                        .plat-animated-child-10 {
                            &::before {
                                .animation-delay(-@spin-frequency + (@delay-step * 10));
                            }
                        }

                        .plat-animated-child-11 {
                            &::before {
                                .animation-delay(-@spin-frequency + (@delay-step * 11));
                            }
                        }
                    }
                }
            }
            & when (@prop = color) {
                @fill-color: fade(@value, 80%);

                &.plat-ring-2 {
                    .plat-animated-ring {
                        .plat-animated-child {
                            &::before {
                                background-color: @fill-color;
                            }
                        }
                    }
                }
            }
            & when (@prop = diameter) {
                &.plat-ring-2 {
                    width: @value;
                    height: @value;
                }
            }
            & when (@prop = fade-delay-animation-name) {
                &.plat-ring-2 {
                    .plat-animated-ring {
                        .plat-animated-child {
                            &::before {
                                .animation-name(@value);
                            }
                        }
                    }
                }
            }
            & when (@prop = spin-frequency) {
                @delay-step: @spin-frequency / 12;

                &.plat-ring-2 {
                    .plat-animated-ring {
                        .plat-animated-child {
                            &::before {
                                .animation-duration(@value);
                            }
                        }

                        .plat-animated-child-1 {
                            &::before {
                                .animation-delay(-@value + @delay-step);
                            }
                        }

                        .plat-animated-child-2 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 2));
                            }
                        }

                        .plat-animated-child-3 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 3));
                            }
                        }

                        .plat-animated-child-4 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 4));
                            }
                        }

                        .plat-animated-child-5 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 5));
                            }
                        }

                        .plat-animated-child-6 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 6));
                            }
                        }

                        .plat-animated-child-7 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 7));
                            }
                        }

                        .plat-animated-child-8 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 8));
                            }
                        }

                        .plat-animated-child-9 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 9));
                            }
                        }

                        .plat-animated-child-10 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 10));
                            }
                        }

                        .plat-animated-child-11 {
                            &::before {
                                .animation-delay(-@value + (@delay-step * 11));
                            }
                        }
                    }
                }
            }
        }
    }
}

#platui {
    #Radio {
        #dependencies {
            #platui > #variables;
            @fill-color: @primary-color;
            @empty-color: @transparent;
        }

        #platui > #Radio > #dependencies;

    /// =========== Radio Colors =========== ///

        @border-color: @grey;
        @background-color: @empty-color;

    /// =========== Active Radio Colors =========== ///

        @mark-color: @fill-color;
        @active-border-color: @fill-color;
        @active-background-color: @empty-color;

    /// =========== Radio Size =========== ///

        @diameter: @global-indicator-diameter;
        @border-width: 1px;
        @mark-padding: 1px;

    /// =========== Variable Radio Styles =========== ///

        .plat-radio(@prop; @value) {
            #platui > #mixins;

            & when (@prop = fill-color) {
                .plat-radio-container {
                    &.plat-bullet {
                        border-color: @value;

                        .plat-mark {
                            background-color: @value;
                        }
                    }
                }
            }
            & when (@prop = empty-color) {
                .plat-radio-container {
                    background-color: @value;

                    &.plat-bullet {
                        .plat-mark {
                            border-color: @value;
                        }
                    }
                }
            }
            & when (@prop = mark-color) {
                .plat-radio-container {
                    &.plat-bullet {
                        .plat-mark {
                            background-color: @value;
                        }
                    }
                }
            }
            & when (@prop = background-color) {
                .plat-radio-container {
                    background-color: @value;
                }
            }
            & when (@prop = border-color) {
                .plat-radio-container {
                    border-color: @value;
                }
            }
            & when (@prop = active-border-color) {
                .plat-radio-container {
                    &.plat-bullet {
                        border-color: @value;
                    }
                }
            }
            & when (@prop = active-background-color) {
                .plat-radio-container {
                    &.plat-bullet {
                        .plat-mark {
                            border-color: @value;
                        }
                    }
                }
            }
            & when (@prop = diameter) {
                .plat-radio-container {
                    .flex(0 0 @value);
                    width: @value;
                    max-width: @value;
                    height: @value;
                    max-height: @value;
                }
            }
            & when (@prop = border-width) {
                .plat-radio-container {
                    border-width: @value;
                }
            }
            & when (@prop = mark-padding) {
                .plat-radio-container {
                    &.plat-bullet {
                        .plat-mark {
                            border-width: @value;
                        }
                    }
                }
            }
        }
    }

    #controls {
        /// =========== Variable Radio Styles =========== ///

        .plat-radio(@prop: undefined; @value: undefined) {
            #platui > #mixins;

            & when (@prop = undefined), (@value = undefined) {
                .plat-radio-container {
                    .flex(0 0 @diameter);
                    width: @diameter;
                    max-width: @diameter;
                    height: @diameter;
                    max-height: @diameter;
                    background-color: @background-color;
                    border-width: @border-width;
                    border-color: @border-color;

                    &.plat-bullet {
                        border-color: @active-border-color;

                        .plat-mark {
                            background-color: @mark-color;
                            border-width: @mark-padding;
                            border-color: @active-background-color;
                        }
                    }
                }
            }
            & when (@prop = fill-color) {
                .plat-radio-container {
                    &.plat-bullet {
                        border-color: @value;

                        .plat-mark {
                            background-color: @value;
                        }
                    }
                }
            }
            & when (@prop = empty-color) {
                .plat-radio-container {
                    background-color: @value;

                    &.plat-bullet {
                        .plat-mark {
                            border-color: @value;
                        }
                    }
                }
            }
            & when (@prop = mark-color) {
                .plat-radio-container {
                    &.plat-bullet {
                        .plat-mark {
                            background-color: @value;
                        }
                    }
                }
            }
            & when (@prop = background-color) {
                .plat-radio-container {
                    background-color: @value;
                }
            }
            & when (@prop = border-color) {
                .plat-radio-container {
                    border-color: @value;
                }
            }
            & when (@prop = active-border-color) {
                .plat-radio-container {
                    &.plat-bullet {
                        border-color: @value;
                    }
                }
            }
            & when (@prop = active-background-color) {
                .plat-radio-container {
                    &.plat-bullet {
                        .plat-mark {
                            border-color: @value;
                        }
                    }
                }
            }
            & when (@prop = diameter) {
                .plat-radio-container {
                    .flex(0 0 @value);
                    width: @value;
                    max-width: @value;
                    height: @value;
                    max-height: @value;
                }
            }
            & when (@prop = border-width) {
                .plat-radio-container {
                    border-width: @value;
                }
            }
            & when (@prop = mark-padding) {
                .plat-radio-container {
                    &.plat-bullet {
                        .plat-mark {
                            border-width: @value;
                        }
                    }
                }
            }
        }
    }
}

#platui {
    #Range {
        #dependencies {
            #platui > #variables;
            @knob-base: @white;
        }

        #platui > #Range > #dependencies;

    /// ================= Range Colors ================== ///

        @fill-color: darken(@neutral-color, 10%);
        @empty-color: lighten(@neutral-color, 10%);
        @outline-border-color: lighten(@neutral-color, 10%);

    /// ================= Range Size ================== ///

        @thickness: 0.5em;
        @border-radius: 4px;
        @outline-border-width: 1px;

    /// ================= Range Knob Properties ================== ///

        @knob-diameter: @global-touch-diameter;
        @knob-color: @knob-base;
        @knob-border-color: darken(@knob-base, 15%);
        @knob-border-width: 1px;

    /// =============== Range Transitions =============== ///

        @transition-time: 300ms;

    /// ========== Variable Range Style =========== ///

        .plat-range(@prop; @value) {
            #platui > #mixins;

            & when (@prop = knob-base) {
                .plat-range-container {
                    .plat-range-track {
                        .plat-lower-knob,
                        .plat-upper-knob {
                            background-color: @value;
                            border-color: darken(@value, 15%);
                        }
                    }
                }
            }
            & when (@prop = fill-color) {
                .plat-range-container {
                    .plat-range-track {
                        .box-shadow(inset 0px 1px 1px 0px darken(@value, 10%));
                        background-color: @value;
                    }
                }
            }
            & when (@prop = empty-color) {
                .plat-range-container {
                    background-color: @value;
                }

                &:not(.range-outline) {
                    .plat-range-container {
                        .box-shadow(inset 0px 1px 1px 0px darken(@value, 10%));
                    }
                }
            }
            & when (@prop = outline-border-color) {
                .plat-range-container {
                    border-color: @value;
                }
            }
            & when (@prop = knob-color) {
                .plat-range-container {
                    .plat-range-track {
                        .plat-lower-knob,
                        .plat-upper-knob {
                            background-color: @value;
                        }
                    }
                }
            }
            & when (@prop = knob-border-color) {
                .plat-range-container {
                    .plat-range-track {
                        .plat-lower-knob,
                        .plat-upper-knob {
                            border-color: @value;
                        }
                    }
                }
            }
            & when (@prop = knob-border-width) {
                .plat-range-container {
                    .plat-range-track {
                        .plat-lower-knob,
                        .plat-upper-knob {
                            border-width: @value;
                        }
                    }
                }
            }
            & when (@prop = border-radius) {
                .plat-range-container {
                    .border-radius(@value);

                    .plat-range-track {
                        .border-radius(@value);
                    }
                }
            }
            & when (@prop = outline-border-width) {
                .plat-range-container {
                    border-width: @value;
                }
            }
            & when (@prop = thickness) {
                @half-thickness: @value / 2;

                &.plat-horizontal,
                &.plat-horizontal-reversed {
                    .plat-range-container {
                        .translate-accelerate(0;-@half-thickness);
                        height: @value;

                        .plat-range-track {
                            .plat-lower-knob,
                            .plat-upper-knob {
                                top: @half-thickness;
                            }
                        }
                    }
                }

                &.plat-vertical,
                &.plat-vertical-reversed {
                    .plat-range-container {
                        .translate-accelerate(-@half-thickness;0);
                        width: @value;

                        .plat-range-track {
                            .plat-lower-knob,
                            .plat-upper-knob {
                                left: @half-thickness;
                            }
                        }
                    }
                }
            }
            & when (@prop = knob-diameter) {
                @knob-radius: @knob-diameter / 2;

                .plat-range-container {
                    .plat-range-track {
                        .plat-lower-knob,
                        .plat-upper-knob {
                            width: @value;
                            height: @value;
                        }
                    }
                }

                &.plat-horizontal,
                &.plat-horizontal-reversed {
                    height: @value;
                    padding-left: @knob-radius;
                    padding-right: @knob-radius;

                    .plat-range-container {
                        .plat-range-track {
                            .plat-lower-knob,
                            .plat-upper-knob {
                                .translate-accelerate(0;-@knob-radius);
                            }

                            .plat-lower-knob {
                                left: -@knob-radius;
                            }

                            .plat-upper-knob {
                                right: -@knob-radius;
                            }
                        }
                    }
                }

                &.plat-vertical,
                &.plat-vertical-reversed {
                    width: @value;
                    padding-top: @knob-radius;
                    padding-bottom: @knob-radius;

                    .plat-range-container {
                        top: @knob-radius;

                        .plat-range-track {
                            .plat-lower-knob,
                            .plat-upper-knob {
                                .translate-accelerate(-@knob-radius;0);
                            }

                            .plat-lower-knob {
                                bottom: -@knob-radius;
                            }

                            .plat-upper-knob {
                                top: -@knob-radius;
                            }
                        }
                    }
                }
            }
            & when (@prop = transition-time) {
                &.plat-horizontal,
                &.plat-horizontal-reversed,
                &.plat-vertical,
                &.plat-vertical-reversed {
                    .plat-range-container {
                        .plat-range-track {
                            &.plat-transition-init {
                                .transition-duration(@value);
                            }
                        }
                    }
                }
            }
        }
    }

    #controls {
        /// ========== Variable Range Style =========== ///

        .plat-range(@prop: undefined; @value: undefined) {
            #platui > #mixins;

            & when (@prop = undefined), (@value = undefined) {
                @knob-radius: @knob-diameter / 2;
                @half-thickness: @thickness / 2;

                .plat-range-container {
                    .border-radius(@border-radius);

                    .plat-range-track {
                        .box-shadow(inset 0px 1px 1px 0px darken(@fill-color, 10%));
                        .border-radius(@border-radius);
                        background-color: @fill-color;

                        .plat-lower-knob,
                        .plat-upper-knob {
                            width: @knob-diameter;
                            height: @knob-diameter;
                            background-color: @knob-color;
                            border-color: @knob-border-color;
                            border-width: @knob-border-width;
                        }
                    }
                }

                &:not(.range-outline) {
                    .plat-range-container {
                        .box-shadow(inset 0px 1px 1px 0px darken(@empty-color, 10%));
                        background-color: @empty-color;
                    }
                }

                &.range-outline {
                    .plat-range-container {
                        border-color: @outline-border-color;
                        border-width: @outline-border-width;
                    }
                }

                &.plat-horizontal,
                &.plat-horizontal-reversed {
                    height: @knob-diameter;
                    padding-left: @knob-radius;
                    padding-right: @knob-radius;

                    .plat-range-container {
                        .translate-accelerate(0;-@half-thickness);
                        height: @thickness;

                        .plat-range-track {
                            .plat-lower-knob,
                            .plat-upper-knob {
                                .translate-accelerate(0;-@knob-radius);
                                top: @half-thickness;
                            }

                            .plat-lower-knob {
                                left: -@knob-radius;
                            }

                            .plat-upper-knob {
                                right: -@knob-radius;
                            }

                            &.plat-transition-init {
                                .transition-duration(@transition-time);
                            }
                        }
                    }
                }

                &.plat-vertical,
                &.plat-vertical-reversed {
                    width: @knob-diameter;
                    padding-top: @knob-radius;
                    padding-bottom: @knob-radius;

                    .plat-range-container {
                        .translate-accelerate(-@half-thickness;0);
                        top: @knob-radius;
                        width: @thickness;

                        .plat-range-track {
                            .plat-lower-knob,
                            .plat-upper-knob {
                                .translate-accelerate(-@knob-radius;0);
                                left: @half-thickness;
                            }

                            .plat-lower-knob {
                                bottom: -@knob-radius;
                            }

                            .plat-upper-knob {
                                top: -@knob-radius;
                            }

                            &.plat-transition-init {
                                .transition-duration(@transition-time);
                            }
                        }
                    }
                }
            }
            & when (@prop = knob-base) {
                .plat-range-container {
                    .plat-range-track {
                        .plat-lower-knob,
                        .plat-upper-knob {
                            background-color: @value;
                            border-color: darken(@value, 15%);
                        }
                    }
                }
            }
            & when (@prop = fill-color) {
                .plat-range-container {
                    .plat-range-track {
                        .box-shadow(inset 0px 1px 1px 0px darken(@value, 10%));
                        background-color: @value;
                    }
                }
            }
            & when (@prop = empty-color) {
                .plat-range-container {
                    background-color: @value;
                }

                &:not(.range-outline) {
                    .plat-range-container {
                        .box-shadow(inset 0px 1px 1px 0px darken(@value, 10%));
                    }
                }
            }
            & when (@prop = outline-border-color) {
                .plat-range-container {
                    border-color: @value;
                }
            }
            & when (@prop = knob-color) {
                .plat-range-container {
                    .plat-range-track {
                        .plat-lower-knob,
                        .plat-upper-knob {
                            background-color: @value;
                        }
                    }
                }
            }
            & when (@prop = knob-border-color) {
                .plat-range-container {
                    .plat-range-track {
                        .plat-lower-knob,
                        .plat-upper-knob {
                            border-color: @value;
                        }
                    }
                }
            }
            & when (@prop = knob-border-width) {
                .plat-range-container {
                    .plat-range-track {
                        .plat-lower-knob,
                        .plat-upper-knob {
                            border-width: @value;
                        }
                    }
                }
            }
            & when (@prop = border-radius) {
                .plat-range-container {
                    .border-radius(@value);

                    .plat-range-track {
                        .border-radius(@value);
                    }
                }
            }
            & when (@prop = outline-border-width) {
                .plat-range-container {
                    border-width: @value;
                }
            }
            & when (@prop = thickness) {
                @half-thickness: @value / 2;

                &.plat-horizontal,
                &.plat-horizontal-reversed {
                    .plat-range-container {
                        .translate-accelerate(0;-@half-thickness);
                        height: @value;

                        .plat-range-track {
                            .plat-lower-knob,
                            .plat-upper-knob {
                                top: @half-thickness;
                            }
                        }
                    }
                }

                &.plat-vertical,
                &.plat-vertical-reversed {
                    .plat-range-container {
                        .translate-accelerate(-@half-thickness;0);
                        width: @value;

                        .plat-range-track {
                            .plat-lower-knob,
                            .plat-upper-knob {
                                left: @half-thickness;
                            }
                        }
                    }
                }
            }
            & when (@prop = knob-diameter) {
                @knob-radius: @knob-diameter / 2;

                .plat-range-container {
                    .plat-range-track {
                        .plat-lower-knob,
                        .plat-upper-knob {
                            width: @value;
                            height: @value;
                        }
                    }
                }

                &.plat-horizontal,
                &.plat-horizontal-reversed {
                    height: @value;
                    padding-left: @knob-radius;
                    padding-right: @knob-radius;

                    .plat-range-container {
                        .plat-range-track {
                            .plat-lower-knob,
                            .plat-upper-knob {
                                .translate-accelerate(0;-@knob-radius);
                            }

                            .plat-lower-knob {
                                left: -@knob-radius;
                            }

                            .plat-upper-knob {
                                right: -@knob-radius;
                            }
                        }
                    }
                }

                &.plat-vertical,
                &.plat-vertical-reversed {
                    width: @value;
                    padding-top: @knob-radius;
                    padding-bottom: @knob-radius;

                    .plat-range-container {
                        top: @knob-radius;

                        .plat-range-track {
                            .plat-lower-knob,
                            .plat-upper-knob {
                                .translate-accelerate(-@knob-radius;0);
                            }

                            .plat-lower-knob {
                                bottom: -@knob-radius;
                            }

                            .plat-upper-knob {
                                top: -@knob-radius;
                            }
                        }
                    }
                }
            }
            & when (@prop = transition-time) {
                &.plat-horizontal,
                &.plat-horizontal-reversed,
                &.plat-vertical,
                &.plat-vertical-reversed {
                    .plat-range-container {
                        .plat-range-track {
                            &.plat-transition-init {
                                .transition-duration(@value);
                            }
                        }
                    }
                }
            }
        }
    }
}

#platui {
    #Select {
        #dependencies {
            #platui > #variables;
            @border-color: @neutral-color;
        }

        #platui > #Select > #dependencies;

    /// =========== Select Colors =========== ///

        @background-color: @transparent;
        @color: @default-font-color;
        @border-color-focus: darken(@border-color, 25%);
        @color-light: @white;
        @border-color-light: @white;
        @border-color-light-focus: @white;

    /// =========== Select Sizes =========== ///

        @height: 2.5em;
        @border-radius: @global-border-radius;
        @border-width: 1px;

    /// =========== Properties =========== ///

        @caret: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAUCAYAAACeXl35AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAShJREFUeNq8lc0RgjAQhfOnXCkFbx61BDvQDvTo0QosQTvQDrQDPXrTDuSuEN9GcDIYQJH4ZnbYyUIe7AcLY38Wz46DP/nt82SJ0FwIL0F7I1b2E5IOQspIKNXqI6VJwtL7/Yh0iIiFVRuhGOs0bc2M9oJZjHRCZrRmG16okNxuOFO3Ymj2YmyGOOZrsnDOCRHizvpo7+9mWq+RLlxvaVE/8Sxys2ui5JrGPF3cPjFszNPFzVYVqCdPrT/mmd3gFum8btKUKUTswDKqM824UWd6rlbWtTSXYUFMqniiC2Rm2FeZfaMx7auCwBmccwI9bXvwrmguvpk9Z+XGx6QPzfep1MuMcqyds5oXRYir7HS07Hbzv0Dk+59mePriVqaNL25VPBtxewgwABxVrJXnt4pwAAAAAElFTkSuQmCC";
        @caret-light: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAUCAYAAACeXl35AAAA80lEQVRIS73UYRWCMBiF4XsbGMEI2kAbaANpoEm0gTTQBtpAIxiBBp/n2xkcQNjmNuA/Pme+uxAzP1RPRDZzuCSfNXgGcJwYLUkWBrSnfAFYTYS+AWxJVm1wCUDRRWa0spiiaEB7yh2AW2awIFnWv9kBLZqzp+nWPsAPmLFn0y0ETO3Z6eYFM/TsdAsCE3reSe7HLt5gw9Y2dSKPP/b5AbDWvUWB9pT6MVA0ZJ+Kmb1FgxY9ALh69nkiefFt2PmXtl8WEQUVHnqc3YIvTQ8c6+ntFgU6enq7RYMDPYO6JYEWNR94196Sbmn/ZRExE3HtbQz8AtOmYhUhBb2SAAAAAElFTkSuQmCC";

    /// =========== Variable Select Styles =========== ///

        .plat-select(@prop; @value) {
            #platui > #mixins;

            & when (@prop = border-color) {
                border-color: @value;

                &:focus {
                    border-color: @value;
                }
            }
            & when (@prop = background-color) {
                background-color: @value;

                &::-ms-value {
                    background-color: @value;
                }
            }
            & when (@prop = color) {
                color: @value;

                &::-ms-value {
                    color: @value;
                }
            }
            & when (@prop = height) {
                height: @value;
            }
            & when (@prop = border-color-focus) {
                &:focus {
                    border-color: @value;
                }
            }
            & when (@prop = color-light) {
                &.select-light {
                    color: @value;

                    &::-ms-value {
                        color: @value;
                    }
                }
            }
            & when (@prop = border-color-light) {
                &.select-light {
                    border-color: @value;
                }
            }
            & when (@prop = border-color-light-focus) {
                &.select-light {
                    &:focus {
                        border-color: @value;
                    }
                }
            }
            & when (@prop = border-radius) {
                .border-radius(@value);
            }
            & when (@prop = border-width) {
                border-width: @value;
            }
            & when (@prop = caret) {
                background-image: url(@value);
            }
            & when (@prop = caret-light) {
                &.select-light {
                    background-image: url(@value);
                }
            }
        }
    }

    #controls {
        /// =========== Variable Select Styles =========== ///

        .plat-select(@prop: undefined; @value: undefined) {
            #platui > #mixins;

            & when (@prop = undefined), (@value = undefined) {
                .border-radius(@border-radius);
                height: @height;
                color: @color;
                background-color: @background-color;
                border: @border-width solid @border-color;
                background-image: url(@caret);

                &:focus {
                    border-color: @border-color-focus;
                }

                &::-ms-value {
                    color: @color;
                    background-color: @background-color;
                }

                &.select-light {
                    color: @color-light;
                    background-image: url(@caret-light);
                    border-color: @border-color-light;

                    &:focus {
                        border-color: @border-color-light-focus;
                    }

                    &::-ms-value {
                        color: @color-light;
                    }

                    option {
                        color: @color;
                    }
                }
            }
            & when (@prop = border-color) {
                border-color: @value;

                &:focus {
                    border-color: @value;
                }
            }
            & when (@prop = background-color) {
                background-color: @value;

                &::-ms-value {
                    background-color: @value;
                }
            }
            & when (@prop = color) {
                color: @value;

                &::-ms-value {
                    color: @value;
                }
            }
            & when (@prop = height) {
                height: @value;
            }
            & when (@prop = border-color-focus) {
                &:focus {
                    border-color: @value;
                }
            }
            & when (@prop = color-light) {
                &.select-light {
                    color: @value;

                    &::-ms-value {
                        color: @value;
                    }
                }
            }
            & when (@prop = border-color-light) {
                &.select-light {
                    border-color: @value;
                }
            }
            & when (@prop = border-color-light-focus) {
                &.select-light {
                    &:focus {
                        border-color: @value;
                    }
                }
            }
            & when (@prop = border-radius) {
                .border-radius(@value);
            }
            & when (@prop = border-width) {
                border-width: @value;
            }
            & when (@prop = caret) {
                background-image: url(@value);
            }
            & when (@prop = caret-light) {
                &.select-light {
                    background-image: url(@value);
                }
            }
        }
    }
}

#platui {
    #Slider {
        #dependencies {
            #platui > #variables;
            @knob-base: @white;
        }

        #platui > #Slider > #dependencies;

    /// ================= Slider Colors ================== ///

        @fill-color: darken(@neutral-color, 10%);
        @empty-color: lighten(@neutral-color, 10%);
        @outline-border-color: lighten(@neutral-color, 10%);

    /// ================= Slider Size ================== ///

        @thickness: 0.5em;
        @border-radius: 4px;
        @outline-border-width: 1px;

    /// ================= Slider Knob Properties ================== ///

        @knob-diameter: @global-touch-diameter;
        @knob-color: @knob-base;
        @knob-border-color: darken(@knob-base, 15%);
        @knob-border-width: 1px;

    /// ============== Slider Transitions =============== ///

        @transition-time: 300ms;

    /// ========== Variable Slider Styles =========== ///

        .plat-slider(@prop; @value) {
            #platui > #mixins;

            & when (@prop = knob-base) {
                .plat-slider-container {
                    .plat-slider-track {
                        .plat-knob {
                            background-color: @value;
                            border-color: darken(@value, 15%);
                        }
                    }
                }
            }
            & when (@prop = fill-color) {
                .plat-slider-container {
                    .plat-slider-track {
                        .box-shadow(inset 0px 1px 1px 0px darken(@value, 10%));
                        background-color: @value;
                    }
                }
            }
            & when (@prop = empty-color) {
                .plat-slider-container {
                    background-color: @value;
                }

                &:not(.slider-outline) {
                    .plat-slider-container {
                        .box-shadow(inset 0px 1px 1px 0px darken(@value, 10%));
                    }
                }
            }
            & when (@prop = outline-border-color) {
                .plat-slider-container {
                    border-color: @value;
                }
            }
            & when (@prop = knob-color) {
                .plat-slider-container {
                    .plat-slider-track {
                        .plat-knob {
                            background-color: @value;
                        }
                    }
                }
            }
            & when (@prop = knob-border-color) {
                .plat-slider-container {
                    .plat-slider-track {
                        .plat-knob {
                            border-color: @value;
                        }
                    }
                }
            }
            & when (@prop = knob-border-width) {
                .plat-slider-container {
                    .plat-slider-track {
                        .plat-knob {
                            border-width: @value;
                        }
                    }
                }
            }
            & when (@prop = border-radius) {
                .plat-slider-container {
                    .border-radius(@value);

                    .plat-slider-track {
                        .border-radius(@value);
                    }
                }
            }
            & when (@prop = outline-border-width) {
                .plat-slider-container {
                    border-width: @value;
                }
            }
            & when (@prop = thickness) {
                @half-thickness: @value / 2;

                &.plat-horizontal,
                &.plat-horizontal-reversed {
                    .plat-slider-container {
                        .translate-accelerate(0;-@half-thickness);
                        height: @value;

                        .plat-slider-track {
                            .plat-knob {
                                top: @half-thickness;
                            }
                        }
                    }
                }

                &.plat-vertical,
                &.plat-vertical-reversed {
                    .plat-slider-container {
                        .translate-accelerate(-@half-thickness;0);
                        width: @value;

                        .plat-slider-track {
                            .plat-knob {
                                left: @half-thickness;
                            }
                        }
                    }
                }
            }
            & when (@prop = knob-diameter) {
                @knob-radius: @value / 2;

                .plat-slider-container {
                    .plat-slider-track {
                        .plat-knob {
                            width: @value;
                            height: @value;
                        }
                    }
                }

                &.plat-horizontal,
                &.plat-horizontal-reversed {
                    height: @value;
                    padding-left: @knob-radius;
                    padding-right: @knob-radius;

                    .plat-slider-container {
                        .plat-slider-track {
                            .plat-knob {
                                .translate-accelerate(0;-@knob-radius);
                            }
                        }
                    }
                }

                &.plat-horizontal {
                    .plat-slider-container {
                        .plat-slider-track {
                            .plat-knob {
                                right: -@knob-radius;
                            }
                        }
                    }
                }

                &.plat-horizontal-reversed {
                    .plat-slider-container {
                        .plat-slider-track {
                            .plat-knob {
                                left: -@knob-radius;
                            }
                        }
                    }
                }

                &.plat-vertical,
                &.plat-vertical-reversed {
                    width: @value;
                    padding-top: @knob-radius;
                    padding-bottom: @knob-radius;

                    .plat-slider-container {
                        top: @knob-radius;

                        .plat-slider-track {
                            .plat-knob {
                                .translate-accelerate(-@knob-radius;0);
                            }
                        }
                    }
                }

                &.plat-vertical {
                    .plat-slider-container {
                        .plat-slider-track {
                            .plat-knob {
                                top: -@knob-radius;
                            }
                        }
                    }
                }

                &.plat-vertical-reversed {
                    .plat-slider-container {
                        .plat-slider-track {
                            .plat-knob {
                                bottom: -@knob-radius;
                            }
                        }
                    }
                }
            }
            & when (@prop = transition-time) {
                &.plat-horizontal,
                &.plat-horizontal-reversed,
                &.plat-vertical,
                &.plat-vertical-reversed {
                    .plat-slider-container {
                        .plat-slider-track {
                            &.plat-transition-init {
                                .transition-duration(@value);
                            }
                        }
                    }
                }
            }
        }
    }

    #controls {
        /// ========== Variable Slider Styles =========== ///

        .plat-slider(@prop: undefined; @value: undefined) {
            #platui > #mixins;

            & when (@prop = undefined), (@value = undefined) {
                @knob-radius: @knob-diameter / 2;
                @half-thickness: @thickness / 2;

                .plat-slider-container {
                    .border-radius(@border-radius);

                    .plat-slider-track {
                        .box-shadow(inset 0px 1px 1px 0px darken(@fill-color, 10%));
                        .border-radius(@border-radius);
                        background-color: @fill-color;

                        .plat-knob {
                            width: @knob-diameter;
                            height: @knob-diameter;
                            background-color: @knob-color;
                            border-color: @knob-border-color;
                            border-width: @knob-border-width;
                        }
                    }
                }

                &:not(.slider-outline) {
                    .plat-slider-container {
                        .box-shadow(inset 0px 1px 1px 0px darken(@empty-color, 10%));
                        background-color: @empty-color;
                    }
                }

                &.slider-outline {
                    .plat-slider-container {
                        border-width: @outline-border-width;
                        border-color: @outline-border-color;
                    }
                }

            /// ============ Slider Orientations ============= ///

                &.plat-horizontal,
                &.plat-horizontal-reversed {
                    height: @knob-diameter;
                    padding-left: @knob-radius;
                    padding-right: @knob-radius;

                    .plat-slider-container {
                        .translate-accelerate(0;-@half-thickness);
                        height: @thickness;

                        .plat-slider-track {
                            .plat-knob {
                                .translate-accelerate(0;-@knob-radius);
                                top: @half-thickness;
                            }

                            &.plat-transition-init {
                                .transition-duration(@transition-time);
                            }
                        }
                    }
                }

                &.plat-horizontal {
                    .plat-slider-container {
                        .plat-slider-track {
                            .plat-knob {
                                right: -@knob-radius;
                            }
                        }
                    }
                }

                &.plat-horizontal-reversed {
                    .plat-slider-container {
                        .plat-slider-track {
                            .plat-knob {
                                left: -@knob-radius;
                            }
                        }
                    }
                }

                &.plat-vertical,
                &.plat-vertical-reversed {
                    width: @knob-diameter;
                    padding-top: @knob-radius;
                    padding-bottom: @knob-radius;

                    .plat-slider-container {
                        .translate-accelerate(-@half-thickness;0);
                        top: @knob-radius;
                        width: @thickness;

                        .plat-slider-track {
                            .plat-knob {
                                .translate-accelerate(-@knob-radius;0);
                                left: @half-thickness;
                            }

                            &.plat-transition-init {
                                .transition-duration(@transition-time);
                            }
                        }
                    }
                }

                &.plat-vertical {
                    .plat-slider-container {
                        .plat-slider-track {
                            .plat-knob {
                                top: -@knob-radius;
                            }
                        }
                    }
                }

                &.plat-vertical-reversed {
                    .plat-slider-container {
                        .plat-slider-track {
                            .plat-knob {
                                bottom: -@knob-radius;
                            }
                        }
                    }
                }
            }
            & when (@prop = knob-base) {
                .plat-slider-container {
                    .plat-slider-track {
                        .plat-knob {
                            background-color: @value;
                            border-color: darken(@value, 15%);
                        }
                    }
                }
            }
            & when (@prop = fill-color) {
                .plat-slider-container {
                    .plat-slider-track {
                        .box-shadow(inset 0px 1px 1px 0px darken(@value, 10%));
                        background-color: @value;
                    }
                }
            }
            & when (@prop = empty-color) {
                .plat-slider-container {
                    background-color: @value;
                }

                &:not(.slider-outline) {
                    .plat-slider-container {
                        .box-shadow(inset 0px 1px 1px 0px darken(@value, 10%));
                    }
                }
            }
            & when (@prop = outline-border-color) {
                .plat-slider-container {
                    border-color: @value;
                }
            }
            & when (@prop = knob-color) {
                .plat-slider-container {
                    .plat-slider-track {
                        .plat-knob {
                            background-color: @value;
                        }
                    }
                }
            }
            & when (@prop = knob-border-color) {
                .plat-slider-container {
                    .plat-slider-track {
                        .plat-knob {
                            border-color: @value;
                        }
                    }
                }
            }
            & when (@prop = knob-border-width) {
                .plat-slider-container {
                    .plat-slider-track {
                        .plat-knob {
                            border-width: @value;
                        }
                    }
                }
            }
            & when (@prop = border-radius) {
                .plat-slider-container {
                    .border-radius(@value);

                    .plat-slider-track {
                        .border-radius(@value);
                    }
                }
            }
            & when (@prop = outline-border-width) {
                .plat-slider-container {
                    border-width: @value;
                }
            }
            & when (@prop = thickness) {
                @half-thickness: @value / 2;

                &.plat-horizontal,
                &.plat-horizontal-reversed {
                    .plat-slider-container {
                        .translate-accelerate(0;-@half-thickness);
                        height: @value;

                        .plat-slider-track {
                            .plat-knob {
                                top: @half-thickness;
                            }
                        }
                    }
                }

                &.plat-vertical,
                &.plat-vertical-reversed {
                    .plat-slider-container {
                        .translate-accelerate(-@half-thickness;0);
                        width: @value;

                        .plat-slider-track {
                            .plat-knob {
                                left: @half-thickness;
                            }
                        }
                    }
                }
            }
            & when (@prop = knob-diameter) {
                @knob-radius: @value / 2;

                .plat-slider-container {
                    .plat-slider-track {
                        .plat-knob {
                            width: @value;
                            height: @value;
                        }
                    }
                }

                &.plat-horizontal,
                &.plat-horizontal-reversed {
                    height: @value;
                    padding-left: @knob-radius;
                    padding-right: @knob-radius;

                    .plat-slider-container {
                        .plat-slider-track {
                            .plat-knob {
                                .translate-accelerate(0;-@knob-radius);
                            }
                        }
                    }
                }

                &.plat-horizontal {
                    .plat-slider-container {
                        .plat-slider-track {
                            .plat-knob {
                                right: -@knob-radius;
                            }
                        }
                    }
                }

                &.plat-horizontal-reversed {
                    .plat-slider-container {
                        .plat-slider-track {
                            .plat-knob {
                                left: -@knob-radius;
                            }
                        }
                    }
                }

                &.plat-vertical,
                &.plat-vertical-reversed {
                    width: @value;
                    padding-top: @knob-radius;
                    padding-bottom: @knob-radius;

                    .plat-slider-container {
                        top: @knob-radius;

                        .plat-slider-track {
                            .plat-knob {
                                .translate-accelerate(-@knob-radius;0);
                            }
                        }
                    }
                }

                &.plat-vertical {
                    .plat-slider-container {
                        .plat-slider-track {
                            .plat-knob {
                                top: -@knob-radius;
                            }
                        }
                    }
                }

                &.plat-vertical-reversed {
                    .plat-slider-container {
                        .plat-slider-track {
                            .plat-knob {
                                bottom: -@knob-radius;
                            }
                        }
                    }
                }
            }
            & when (@prop = transition-time) {
                &.plat-horizontal,
                &.plat-horizontal-reversed,
                &.plat-vertical,
                &.plat-vertical-reversed {
                    .plat-slider-container {
                        .plat-slider-track {
                            &.plat-transition-init {
                                .transition-duration(@value);
                            }
                        }
                    }
                }
            }
        }
    }
}

#platui {
    #Toggle {
        #dependencies {
            #platui > #variables;
            @inactive-color: lighten(@neutral-color, 10%);
            @active-color: @success-color;
        }

        #platui > #Toggle > #dependencies;

    /// =========== Toggle Colors =========== ///

        @background-color: @inactive-color;
        @border-color: darken(@inactive-color, 3%);
        @toggle-thin-background-color: darken(@neutral-color, 10%);
        @knob-color: @white;

    /// =========== Active Toggle Colors =========== ///

        @active-background-color: @active-color;
        @active-border-color: darken(@active-color, 5%);

    /// ============ Toggle Size ============ ///

        @height: @global-touch-diameter;
        @width-ratio: 2/1;
        @toggle-thin-ratio: 1/2;

    /// ============= Toggle Transition ============= ///

        @transition-time: 250ms;

    /// ========== Variable Toggle Style =========== ///

        .plat-toggle(@prop; @value) {
            #platui > #mixins;

            & when (@prop = inactive-color) {
                .plat-toggle-container {
                    background-color: @value;
                    border-color: darken(@value, 3%);
                }
            }
            & when (@prop = active-color) {
                .plat-toggle-container {
                    &.plat-slide {
                        border-color: darken(@value, 5%);
                        background-color: @value;
                    }
                }

                &.toggle-thin {
                    .plat-toggle-container {
                        &.plat-slide {
                            background-color: @value;
                        }
                    }
                }
            }
            & when (@prop = background-color) {
                .plat-toggle-container {
                    background-color: @value;
                }
            }
            & when (@prop = border-color) {
                .plat-toggle-container {
                    border-color: @value;
                }
            }
            & when (@prop = active-background-color) {
                .plat-toggle-container {
                    &.plat-slide {
                        background-color: @value;
                    }
                }

                &.toggle-thin {
                    .plat-toggle-container {
                        &.plat-slide {
                            background-color: @value;
                        }
                    }
                }
            }
            & when (@prop = active-border-color) {
                .plat-toggle-container {
                    &.plat-slide {
                        border-color: @value;
                    }
                }
            }
            & when (@prop = toggle-thin-background-color) {
                &.toggle-thin {
                    .plat-toggle-container {
                        background-color: @value;
                    }
                }
            }
            & when (@prop = knob-color) {
                .plat-toggle-container {
                    .plat-knob {
                        background-color: @value;
                    }
                }

                &.toggle-thin {
                    .plat-toggle-container {
                        .plat-knob {
                            border-color: darken(@value, 15%);
                        }
                    }
                }
            }
            & when (@prop = height) {
                #platui > #Toggle;
                @width: @height * @width-ratio;
                @toggle-thin-height: @height * @toggle-thin-ratio;
                @half-thin-height: @toggle-thin-height / 2;
                @toggle-thin-knob-radius: @height / 2;

                .plat-toggle-container {
                    .border-radius(@value);
                    width: @width;
                    height: @value;

                    .plat-knob {
                        height: @value;
                        width: @value;
                    }

                    &.plat-slide {
                        .plat-knob {
                            left: @width - @value;
                        }
                    }
                }

                &.toggle-thin {
                    .plat-toggle-container {
                        height: @toggle-thin-height;

                        .plat-knob {
                            top: @half-thin-height - @toggle-thin-knob-radius;
                        }

                        &.plat-slide {
                            .plat-knob {
                                left: (@width - @value) * 1.05;
                            }
                        }
                    }
                }
            }
            & when (@prop = width-ratio) {
                #platui > #Toggle;
                @width: @height * @value;

                .plat-toggle-container {
                    .flex(0 0 @width);
                    width: @width;

                    &.plat-slide {
                        .plat-knob {
                            left: @width - @height;
                        }
                    }
                }

                &.toggle-thin {
                    .plat-toggle-container {
                        &.plat-slide {
                            .plat-knob {
                                left: (@width - @height) * 1.05;
                            }
                        }
                    }
                }
            }
            & when (@prop = toggle-thin-ratio) {
                #platui > #Toggle;
                @toggle-thin-height: @height * @value;
                @half-thin-height: @toggle-thin-height / 2;
                @toggle-thin-knob-radius: @height / 2;

                &.toggle-thin {
                    .plat-toggle-container {
                        height: @toggle-thin-height;

                        .plat-knob {
                            top: @half-thin-height - @toggle-thin-knob-radius;
                        }
                    }
                }
            }
            & when (@prop = transition-time) {
                .plat-toggle-container {
                    .transition(~'background-color @{value}, border-color @{value}');

                    .plat-knob {
                        .transition-duration(@value);
                    }
                }
            }
        }
    }

    #controls {
        /// ========== Variable Toggle Style =========== ///

        .plat-toggle(@prop: undefined; @value: undefined) {
            #platui > #mixins;

            & when (@prop = undefined), (@value = undefined) {
                @width: @height * @width-ratio;
                @toggle-thin-height: @height * @toggle-thin-ratio;
                @half-thin-height: @toggle-thin-height / 2;
                @toggle-thin-knob-radius: @height / 2;

                .plat-toggle-container {
                    .flex(0 0 @width);
                    .border-radius(@height);
                    .transition(~'background-color @{transition-time}, border-color @{transition-time}');
                    width: @width;
                    height: @height;
                    background-color: @background-color;
                    border-color: @border-color;

                    .plat-knob {
                        .transition-duration(@transition-time);
                        height: @height;
                        width: @height;
                        background-color: @knob-color;
                    }

                    &.plat-slide {
                        border-color: @active-border-color;
                        background-color: @active-background-color;

                        .plat-knob {
                            left: @width - @height;
                        }
                    }
                }

                &.toggle-thin {
                    .plat-toggle-container {
                        height: @toggle-thin-height;
                        background-color: @toggle-thin-background-color;

                        .plat-knob {
                            top: @half-thin-height - @toggle-thin-knob-radius;
                            border-color: darken(@knob-color, 15%);
                        }

                        &.plat-slide {
                            background-color: @active-background-color;

                            .plat-knob {
                                left: (@width - @height) * 1.05;
                            }
                        }
                    }
                }
            }
            & when (@prop = inactive-color) {
                .plat-toggle-container {
                    background-color: @value;
                    border-color: darken(@value, 3%);
                }
            }
            & when (@prop = active-color) {
                .plat-toggle-container {
                    &.plat-slide {
                        border-color: darken(@value, 5%);
                        background-color: @value;
                    }
                }

                &.toggle-thin {
                    .plat-toggle-container {
                        &.plat-slide {
                            background-color: @value;
                        }
                    }
                }
            }
            & when (@prop = background-color) {
                .plat-toggle-container {
                    background-color: @value;
                }
            }
            & when (@prop = border-color) {
                .plat-toggle-container {
                    border-color: @value;
                }
            }
            & when (@prop = active-background-color) {
                .plat-toggle-container {
                    &.plat-slide {
                        background-color: @value;
                    }
                }

                &.toggle-thin {
                    .plat-toggle-container {
                        &.plat-slide {
                            background-color: @value;
                        }
                    }
                }
            }
            & when (@prop = active-border-color) {
                .plat-toggle-container {
                    &.plat-slide {
                        border-color: @value;
                    }
                }
            }
            & when (@prop = toggle-thin-background-color) {
                &.toggle-thin {
                    .plat-toggle-container {
                        background-color: @value;
                    }
                }
            }
            & when (@prop = knob-color) {
                .plat-toggle-container {
                    .plat-knob {
                        background-color: @value;
                    }
                }

                &.toggle-thin {
                    .plat-toggle-container {
                        .plat-knob {
                            border-color: darken(@value, 15%);
                        }
                    }
                }
            }
            & when (@prop = height) {
                #platui > #Toggle;
                @width: @height * @width-ratio;
                @toggle-thin-height: @height * @toggle-thin-ratio;
                @half-thin-height: @toggle-thin-height / 2;
                @toggle-thin-knob-radius: @height / 2;

                .plat-toggle-container {
                    .border-radius(@value);
                    width: @width;
                    height: @value;

                    .plat-knob {
                        height: @value;
                        width: @value;
                    }

                    &.plat-slide {
                        .plat-knob {
                            left: @width - @value;
                        }
                    }
                }

                &.toggle-thin {
                    .plat-toggle-container {
                        height: @toggle-thin-height;

                        .plat-knob {
                            top: @half-thin-height - @toggle-thin-knob-radius;
                        }

                        &.plat-slide {
                            .plat-knob {
                                left: (@width - @value) * 1.05;
                            }
                        }
                    }
                }
            }
            & when (@prop = width-ratio) {
                #platui > #Toggle;
                @width: @height * @value;

                .plat-toggle-container {
                    .flex(0 0 @width);
                    width: @width;

                    &.plat-slide {
                        .plat-knob {
                            left: @width - @height;
                        }
                    }
                }

                &.toggle-thin {
                    .plat-toggle-container {
                        &.plat-slide {
                            .plat-knob {
                                left: (@width - @height) * 1.05;
                            }
                        }
                    }
                }
            }
            & when (@prop = toggle-thin-ratio) {
                #platui > #Toggle;
                @toggle-thin-height: @height * @value;
                @half-thin-height: @toggle-thin-height / 2;
                @toggle-thin-knob-radius: @height / 2;

                &.toggle-thin {
                    .plat-toggle-container {
                        height: @toggle-thin-height;

                        .plat-knob {
                            top: @half-thin-height - @toggle-thin-knob-radius;
                        }
                    }
                }
            }
            & when (@prop = transition-time) {
                .plat-toggle-container {
                    .transition(~'background-color @{value}, border-color @{value}');

                    .plat-knob {
                        .transition-duration(@value);
                    }
                }
            }
        }
    }
}

/// ======= Global Styles ======== ///

/// ======= Globally Set Styles for PlatypusUI ======== ///
& {
    #platui > #variables;
    #platui > #mixins;

    html {
        .fill();
    }

    body {
        .fill();
        position: relative;
    }

    [plat-control="plat-viewport"] {
        .fill();
        .box-sizing(border-box);
        position: relative;
    }

    .plat-viewcontrol {
        .box-sizing(border-box);
        position: relative;
        width: 100%;
        margin: 0;
    }

    .plat-viewport-animate {
        & > .plat-viewcontrol {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
        }
    }

    .plat-hide,
    [plat-hide] {
        display: none !important;
    }

    .plat-hidden,
    [plat-hidden] {
        visibility: hidden !important;
    }

    /** Partially adapted from normalize.css | MIT License | http://necolas.github.io/normalize.css/ **/

    a {
	    color: @primary-color;
	    text-decoration: none;
	    background-color: transparent;

	    &:active,
	    &:hover {
		    outline: 0;
	    }
    }

    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    menu,
    nav,
    section,
    summary {
	    display: block;
    }

    audio,
    canvas,
    progress,
    video {
        display: inline-block;
        vertical-align: baseline;
    }

    audio:not([controls]) {
	    display: none;
	    height: 0;
    }

    [hidden],
    template {
	    display: none;
    }

    img {
        border: 0;
    }

    svg:not(:root) {
        overflow: hidden;
    }

    figure {
        margin: 1em 40px;
    }

    hr {
	    .box-sizing(content-box);
	    height: 0;
    }

    pre {
        overflow: auto;
    }

    code,
    kbd,
    pre,
    samp {
	    font-family: monospace, monospace;
	    font-size: 1em;
    }

    button {
        overflow: visible;
    }

    button,
    select {
        text-transform: none;
    }

    input,
    select {
        .box-sizing(border-box);
        border: 1px solid lighten(@default-font-color, 35%);
        padding: 0 0.25em;
        height: 1.5em;
        outline: none;

        &:focus {
            border-color: @default-font-color;
        }
    }

    button,
    select,
    input {
        .border-radius(0px);
        line-height: normal;
        font: inherit;
    }

    select {
        vertical-align: baseline;
    }

    input {
        vertical-align: baseline;
    }

    button,
    html input[type="button"],
    input[type="reset"],
    input[type="submit"] {
        -webkit-appearance: button;
        cursor: pointer;
    }

    button[disabled],
    html input[disabled] {
        cursor: default;
    }

    button::-moz-focus-inner,
    input::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

    input[type="checkbox"],
    input[type="radio"] {
        .box-sizing(border-box);
        padding: 0;
    }

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        height: auto;
    }

    input[type="search"] {
        .box-sizing(content-box);
        -webkit-appearance: textfield;
    }

    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

    fieldset {
        border: 1px solid #c0c0c0;
        margin: 0 2px;
        padding: 0.35em 0.625em 0.75em;
    }

    legend {
        border: 0;
        padding: 0;
    }

    textarea {
        overflow: auto;
    }

    optgroup {
        font-weight: bold;
    }

    ul {
        margin: 1em 0;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    td,
    th {
        padding: 0;
    }
}

/// ======= Globally-Used Gestures ======== ///

& {
    #platui > #mixins;

    .plat-gesture {
        .misc-webkit-touch();
        .user-select(none);
        .touch-action();
    }

    .plat-no-touch-action {
        .touch-action(none);
    }
}

/// ========== PlatypusUI Helper Classes =========== ///

/// =========== Hide Content for Width ============= ///

& {
    #platui > #variables;
    #platui > #media;

    .phn-max({
	    .hide-on-@{phone-alias} {
		    display: none !important;
	    }
    });

    .phb-max({
	    .hide-on-@{phablet-alias} {
		    display: none !important;
	    }
    });

    .tab-max({
	    .hide-on-@{tablet-alias} {
		    display: none !important;
	    }
    });

    .phb({
	    .hide-above-@{phone-alias} {
		    display: none !important;
	    }
    });

    .tab({
	    .hide-above-@{phablet-alias} {
		    display: none !important;
	    }
    });

    .dsk({
	    .hide-above-@{tablet-alias} {
		    display: none !important;
	    }
    });
}

/// ======= Globally Set Styles for PlatypusUI ======== ///

& {
    #platui > #variables;
    #platui > #mixins;
    #platui > #media;

    html,
    body {
	    font-family: @default-font-type;
	    color: @default-font-color;
        font-size: @default-font-size;
        -webkit-font-smoothing: antialiased;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }

    blockquote {
        .box-sizing(border-box);
	    display: block;
	    margin: 1em 0;
	    padding-left: 1em;
	    color: lighten(@default-font-color, 30%);
	    font-size: @default-font-size;
	    border-left: 1px solid lighten(@default-font-color, 30%);
    }

    cite {
        .box-sizing(border-box);
	    display: block;
	    padding: 0.3em 0;
	    font-size: @default-font-size * 0.9;
    }

    b,
    strong {
	    font-weight: bold;
    }

    dfn {
        font-style: italic;
    }

    abbr[title] {
        .box-sizing(border-box);
        border-bottom: 1px dotted;
    }

    small {
        font-size: 80%;
    }

    sub,
    sup {
	    font-size: 75%;
	    line-height: 0;
	    position: relative;
	    vertical-align: baseline;
    }

    sup {
        top: -0.5em;
    }

    sub {
        bottom: -0.25em;
    }

    /** Font Sizes **/
    /* Font sizes and line-height adjust based on the device-width. Device breakpoints */
    /* are set in global/variables.less. Measurements adapted from Robert Bringhurst's */
    /* classic and exhaustive work The Elements of Typographic Style. */

    @typography-margin: 0.67em;

    h1 {
        .headings();
        margin: @typography-margin 0 (@typography-margin / 1.25);

        &:first-child,
        &.no-collapse-top {
            .box-sizing(border-box);
            margin-top: 0;
            padding-top: @typography-margin;
        }

        &.no-collapse-bottom {
            .box-sizing(border-box);
            margin-bottom: 0;
            padding-bottom: @typography-margin / 1.25;
        }
    }

    h2, h3, h4 {
        .headings();
        margin: (@typography-margin * 1.25) 0 @typography-margin;

        &:first-child,
        &.no-collapse-top {
            .box-sizing(border-box);
            margin-top: 0;
            padding-top: @typography-margin * 1.25;
        }

        &.no-collapse-bottom {
            .box-sizing(border-box);
            margin-bottom: 0;
            padding-bottom: @typography-margin;
        }
    }

    h5, h6 {
        .headings();
        margin: (@typography-margin * 1.5) 0 (@typography-margin * 1.25);

        &:first-child,
        &.no-collapse-top {
            .box-sizing(border-box);
            margin-top: 0;
            padding-top: @typography-margin * 1.5;
        }

        &.no-collapse-bottom {
            .box-sizing(border-box);
            margin-bottom: 0;
            padding-bottom: @typography-margin * 1.25;
        }
    }

    p {
        padding: 0;
        margin: (@typography-margin * 1.5) 0;

        &:first-child,
        &.no-collapse-top {
            .box-sizing(border-box);
            margin-top: 0;
            padding-top: @typography-margin * 1.5;
        }

        &.no-collapse-bottom {
            .box-sizing(border-box);
            margin-bottom: 0;
            padding-bottom: @typography-margin * 1.5;
        }
    }

    .type-headings();
}

/// ======= Globally-Available Animations ======== ///

& {
    #platui > #variables;
    #platui > #mixins;
    #platui > #animations;

    .plat-slidein {
        .animation-name(@slide-in);
        .animation-duration(250ms);
        .animation-fill-mode(forwards);
    }

    .plat-slideout {
        .animation-name(@slide-out);
        .animation-duration(200ms);
        .animation-fill-mode(forwards);
    }

    .plat-fadein {
        .animation-name(@fade-in);
        .animation-duration(500ms);
        .animation-fill-mode(forwards);
    }

    .plat-fadeout {
        .animation-name(@fade-out);
        .animation-duration(100ms);
        .animation-fill-mode(forwards);
    }

    .fade();
    .fade(@fade-in; in);
    .slide();
    .slide(@slide-out; out; left);
    .slideAndFade();
    .slideAndFade(@slide-out-fade-out; out; left);
}

/// ======= Controls ======== ///

/// ============= Button Constants ============= ///

/// ============== Button Declaration =============== ///

& {
    #platui > #mixins;
    #platui > #Button;

    .plat-button,
    .button {
        .border-radius(@border-radius);
        .webkit-touch-additions();
        .box-sizing(border-box);
        .appearance(none);
        position: relative;
        display: inline-block;
        padding: @padding-vertical @padding-horizontal;
        background-color: @background-color;
        color: @color;
        outline: none;
        border: @border-width solid @border-color;
        cursor: pointer;
        font-size: @button-font-size;

        &:active,
        &.plat-selected {
            background-color: darken(@background-color, 10%);
        }

        &.button-disabled,
        &[disabled],
        &:disabled {
            background-color: @background-color;
            opacity: 0.5;
            cursor: default;
        }

        &.button-outline {
            border-color: @background-color;
            color: @background-color;
            border-width: 2px;

            &:active,
            &.plat-selected {
                color: @white;
                background-color: @background-color;
            }

            &.button-disabled,
            &[disabled],
            &:disabled {
                color: @background-color;
                background-color: transparent;
                opacity: 0.5;
                cursor: default;
            }
        }

    /// ============== Button Colors  =============== ///

        &.button-primary {
            background-color: @primary-color;
            border-color: darken(@primary-color, 10%);

            &:active,
            &.plat-selected {
                background-color: darken(@primary-color, 10%);
            }

            &.button-disabled,
            &[disabled],
            &:disabled {
                background-color: @primary-color;
                opacity: 0.5;
                cursor: default;
            }

            &.button-outline {
                border-color: @primary-color;
                color: @primary-color;

                &:active,
                &.plat-selected {
                    color: @white;
                    background-color: @primary-color;
                }

                &.button-disabled,
                &[disabled],
                &:disabled {
                    color: @primary-color;
                    background-color: transparent;
                    opacity: 0.5;
                    cursor: default;
                }
            }
        }

        &.button-secondary {
            background-color: @secondary-color;
            border-color: darken(@secondary-color, 10%);

            &:active,
            &.plat-selected {
                background-color: darken(@secondary-color, 10%);
            }

            &.button-disabled,
            &[disabled],
            &:disabled {
                background-color: @secondary-color;
                opacity: 0.5;
                cursor: default;
            }

            &.button-outline {
                border-color: @secondary-color;
                color: @secondary-color;

                &:active,
                &.plat-selected {
                    color: @white;
                    background-color: @secondary-color;
                }

                &.button-disabled,
                &[disabled],
                &:disabled {
                    color: @secondary-color;
                    background-color: transparent;
                    opacity: 0.5;
                    cursor: default;
                }
            }
        }

        &.button-neutral {
            background-color: @neutral-color;
            border-color: darken(@neutral-color, 10%);

            &:active,
            &.plat-selected {
                background-color: darken(@neutral-color, 10%);
            }

            &.button-disabled,
            &[disabled],
            &:disabled {
                background-color: @neutral-color;
                opacity: 0.5;
                cursor: default;
            }

            &.button-outline {
                border-color: @neutral-color;
                color: @neutral-color;

                &:active,
                &.plat-selected {
                    color: @white;
                    background-color: @neutral-color;
                }

                &.button-disabled,
                &[disabled],
                &:disabled {
                    color: @neutral-color;
                    background-color: transparent;
                    opacity: 0.5;
                    cursor: default;
                }
            }
        }

        &.button-success {
            background-color: @success-color;
            border-color: darken(@success-color, 10%);

            &:active,
            &.plat-selected {
                background-color: darken(@success-color, 10%);
            }

            &.button-disabled,
            &[disabled],
            &:disabled {
                background-color: @success-color;
                opacity: 0.5;
                cursor: default;
            }

            &.button-outline {
                border-color: @success-color;
                color: @success-color;

                &:active,
                &.plat-selected {
                    color: @white;
                    background-color: @success-color;
                }

                &.button-disabled,
                &[disabled],
                &:disabled {
                    color: @success-color;
                    background-color: transparent;
                    opacity: 0.5;
                    cursor: default;
                }
            }
        }

        &.button-danger {
            background-color: @danger-color;
            border-color: darken(@danger-color, 10%);

            &:active,
            &.plat-selected {
                background-color: darken(@danger-color, 10%);
            }

            &.button-disabled,
            &[disabled],
            &:disabled {
                background-color: @danger-color;
                opacity: 0.5;
                cursor: default;
            }

            &.button-outline {
                border-color: @danger-color;
                color: @danger-color;

                &:active,
                &.plat-selected {
                    color: @white;
                    background-color: @danger-color;
                }

                &.button-disabled,
                &[disabled],
                &:disabled {
                    color: @danger-color;
                    background-color: transparent;
                    opacity: 0.5;
                    cursor: default;
                }
            }
        }

        &.button-caution {
            background-color: @caution-color;
            border-color: darken(@caution-color, 10%);

            &:active,
            &.plat-selected {
                background-color: darken(@caution-color, 10%);
            }

            &.button-disabled,
            &[disabled],
            &:disabled {
                background-color: @caution-color;
                opacity: 0.5;
                cursor: default;
            }

            &.button-outline {
                border-color: @caution-color;
                color: @caution-color;

                &:active,
                &.plat-selected {
                    color: @white;
                    background-color: @caution-color;
                }

                &.button-disabled,
                &[disabled],
                &:disabled {
                    color: @caution-color;
                    background-color: transparent;
                    opacity: 0.5;
                    cursor: default;
                }
            }
        }

        &.button-outline {
            background-color: transparent;
        }

    /// ============== Button Sizes ================ ///

        &.button-small {
            font-size: 80%;
        }

        &.button-large {
            font-size: 115%;
        }

        &.button-jumbo {
            font-size: 130%;
        }

    /// ============== Button Icons =============== ///

        [class^="icon-"], [class*=" icon-"] {
            position: relative;
            right: -0.3em;
        }
    }
}

/// ============== Button Group Declaration =============== ///

& {
    #platui > #mixins;
    #platui > #Button;

    .button-group {
        overflow: auto;
        width: 100%;

        & > .plat-button,
        & > .button {
            .border-radius(0px);
            margin: 0;
            float: left;
        }

        & > .plat-button:nth-of-type(2n),
        & > .button:nth-of-type(2n) {
            border-right-width: 0;
            border-left-width: 0;
        }

        & > .plat-button:first-of-type,
        & > .button:first-of-type {
            .border-top-left-radius(@border-radius);
            .border-bottom-left-radius(@border-radius);
        }

        & > .plat-button:last-of-type,
        & > .button:last-of-type {
            .border-top-right-radius(@border-radius);
            .border-bottom-right-radius(@border-radius);
            border-right-width: 1px;

            &.button-outline {
                border-right-width: 2px;
            }
        }
    }
}

/// =========== Carousel Declaration =========== ///

& {
    #platui > #mixins;
    #platui > #Carousel;

    .plat-carousel {
        .fill();
        .box-sizing(border-box);
        position: relative;
        display: inline-block;
        line-height: 0;
        min-height: 50px;

        .plat-carousel-viewport {
            .fill();
            .box-sizing(border-box);
            position: relative;
            min-height: 50px;
            overflow: hidden;

            .plat-carousel-container {
                .fill();
                .box-sizing(border-box);
                position: absolute;
                left: 0;
                top: 0;
                min-height: 50px;
                background-color: @background-color;
                white-space: nowrap;

                .plat-carousel-item {
                    .box-sizing(border-box);
                    width: 100%;
                    height: 100%;
                    position: relative;
                    padding-left: @padding-left;
                    padding-right: @padding-right;
                    padding-top: @padding-top;
                    padding-bottom: @padding-bottom;
                    vertical-align: top;
                    white-space: normal;
                    line-height: normal;
                }
            }

            .plat-back-arrow,
            .plat-forward-arrow {
                .box-sizing(border-box);
                .webkit-touch-additions();
                position: absolute;
                text-align: center;
                color: @arrow-color;
                cursor: pointer;
                font-size: @arrow-font-size;
                z-index: 100;

                .plat-icon-arrow-down,
                .plat-icon-arrow-up,
                .plat-icon-arrow-left,
                .plat-icon-arrow-right {
                    .translate-accelerate(0;-50%);
                    display: inline-block;
                    vertical-align: middle;
                    position: absolute;
                    width: @arrow-icon-width;
                    height: @arrow-icon-height;
                    left: 0;
                    top: 50%;
                    font-family: @arrow-font-family;
                    font-weight: @arrow-font-weight;
                    font-style: normal;
                    font-variant: normal;
                    font-size: inherit;
                    speak: none;
                    text-decoration: inherit;
                    text-transform: none;
                    line-height: normal;
                }

                .plat-icon-arrow-down::before { content: @arrow-down; }
                .plat-icon-arrow-left::before { content: @arrow-left; }
                .plat-icon-arrow-right::before { content: @arrow-right; }
                .plat-icon-arrow-up::before { content: @arrow-up; }

                &:active,
                &:hover {
                    color: @arrow-active-color;
                }
            }
        }

        &.plat-horizontal {
            .touch-action(pan-y);

            .plat-carousel-viewport {
                .plat-back-arrow,
                .plat-forward-arrow {
                    top: 0;
                    width: @arrow-parallel-length;
                    height: @arrow-perpendicular-length;
                }

                .plat-back-arrow {
                    left: 0;
                }

                .plat-forward-arrow {
                    right: 0;
                }
            }
        }

        &.plat-vertical {
            .touch-action(pan-x);

            .plat-carousel-viewport {
                .plat-back-arrow,
                .plat-forward-arrow {
                    left: 0;
                    width: @arrow-perpendicular-length;
                    height: @arrow-parallel-length;
                }

                .plat-back-arrow {
                    top: 0;
                }

                .plat-forward-arrow {
                    bottom: 0;
                }
            }
        }

        &.plat-fade {
            .plat-carousel-viewport {
                .plat-carousel-container {
                    .plat-carousel-item {
                        display: block;
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 0;
                        opacity: 0;

                        &.plat-middle {
                            z-index: 1;
                        }

                        &.plat-top {
                            opacity: 1;
                            z-index: 2;
                        }

                        &.plat-transition-init {
                            .transition(opacity @transition-time);
                        }
                    }
                }
            }
        }

        &.plat-translate {
            &.plat-horizontal {
                .plat-carousel-viewport {
                    .plat-carousel-container {
                        .plat-carousel-item {
                            display: inline-block;
                        }
                    }
                }
            }

            &.plat-vertical {
                .plat-carousel-viewport {
                    .plat-carousel-container {
                        .plat-carousel-item {
                            display: block;
                        }
                    }
                }
            }

            .plat-carousel-viewport {
                .plat-carousel-container {
                    &.plat-transition-init {
                        -webkit-transition: -webkit-transform @transition-time;
                        -moz-transition: -moz-transform @transition-time;
                        transition: transform @transition-time;
                    }
                }
            }
        }

        &.carousel-no-arrows {
            .plat-carousel-viewport {
                .plat-back-arrow,
                .plat-forward-arrow {
                    display: none;
                }
            }
        }
    }
}

/// =========== Checkbox Declaration =========== ///

& {
    #platui > #mixins;
    #platui > #Checkbox;

    .plat-checkbox {
        .flex-vertical-center(true);
        .box-sizing(border-box);
        cursor: pointer;

        & > span {
            line-height: @diameter;

            &:first-of-type {
                padding-left: 0.4em;
            }
        }

        .plat-checkbox-container {
            .flex(0 0 @diameter);
            .border-radius(50%);
            .box-sizing(content-box);
            position: relative;
            display: inline-block;
            width: @diameter;
            max-width: @diameter;
            height: @diameter;
            max-height: @diameter;
            background-color: @background-color;
            overflow: hidden;
            border: @border-width solid @border-color;

    /// ============ Checkmark Symbol ============ ///

            &.plat-check,
            &.plat-x {
                background-color: @active-background-color;
                border-color: @active-border-color;

                .plat-mark::before,
                .plat-mark::after {
                    .border-radius(2px);
                    content: "";
                    position: absolute;
                    height: 2px;
                    background-color: @mark-color;
                }
            }

            &.plat-check {
                .plat-mark::before {
                    .rotate(45deg);
                    left: 13%;
                    top: 55%;
                    width: @diameter / 2.6;
                }

                .plat-mark::after {
                    .rotate(-45deg);
                    left: 34%;
                    top: 47%;
                    width: @diameter / 1.7;
                }
            }

            &.plat-x {
                .plat-mark::before,
                .plat-mark::after {
                    left: 18%;
                    top: 48%;
                    width: @diameter / 1.5;
                }

                .plat-mark::before {
                    .rotate(45deg);
                }

                .plat-mark::after {
                    .rotate(-45deg);
                }
            }
        }

    /// ============ Checkmark Square ============ ///

        &.checkbox-square {
            .plat-checkbox-container {
                .border-radius(@global-border-radius);
            }
        }

    /// ============ Checkmark Colors ============ ///

        &.checkbox-primary {
            .plat-checkbox-container {
                &.plat-check,
                &.plat-x {
                    border-color: @primary-color;
                    background-color: @primary-color;
                }
            }
        }

        &.checkbox-secondary {
            .plat-checkbox-container {
                &.plat-check,
                &.plat-x {
                    border-color: @secondary-color;
                    background-color: @secondary-color;
                }
            }
        }

        &.checkbox-success {
            .plat-checkbox-container {
                &.plat-check,
                &.plat-x {
                    border-color: @success-color;
                    background-color: @success-color;
                }
            }
        }

        &.checkbox-caution {
            .plat-checkbox-container {
                &.plat-check,
                &.plat-x {
                    border-color: @caution-color;
                    background-color: @caution-color;
                }
            }
        }

        &.checkbox-danger {
            .plat-checkbox-container {
                &.plat-check,
                &.plat-x {
                    border-color: @danger-color;
                    background-color: @danger-color;
                }
            }
        }
    }
}

/// =========== Drawer Controller Default Styles =========== ///

& {
    #platui > #mixins;

    .plat-drawer-controller {
        &.plat-horizontal {
            .touch-action(pan-y);
        }

        &.plat-vertical {
            .touch-action(pan-x);
        }
    }
}

/// =========== Drawer Declaration =========== ///

& {
    #platui > #mixins;
    #platui > #Drawer;

    .plat-drawer {
        .scroll();
        .box-sizing(border-box);
        .backface-visibility(hidden);
        position: absolute;
        color: @color;
        z-index: 0;
        background-color: @background-color;

        &.plat-left,
        &.plat-right {
            height: 100%;
            top: 0;
        }

        &.plat-top,
        &.plat-bottom {
            width: 100%;
            left: 0;
        }

        &.plat-left {
            width: @length-left;
            left: 0;
        }

        &.plat-right {
            width: @length-right;
            right: 0;
        }

        &.plat-top {
            height: @length-top;
            top: 0;
        }

        &.plat-bottom {
            height: @length-bottom;
            bottom: 0;
        }
    }
}

/// =========== Drawer Controller Root Element Declaration =========== ///

& {
    #platui > #mixins;
    #platui > #Drawer;

    .plat-drawer-root {
        .backface-visibility(hidden);
        .perspective(none);
        position: relative;
        z-index: 1;

        &.plat-drawer-transition-left,
        &.plat-drawer-transition-right,
        &.plat-drawer-transition-top,
        &.plat-drawer-transition-bottom {
            .user-select(none);
            .touch-action(none);

            .plat-clickeater {
                .fill();
                .touch-action(none);
                position: absolute;
                background-color: transparent;
                overflow: hidden;
                z-index: @global-max-z-index;
            }
        }

        &.plat-drawer-transition-left {
            .box-shadow(@shadow-left);
        }

        &.plat-drawer-transition-right {
            .box-shadow(@shadow-right);
        }

        &.plat-drawer-transition-top {
            .box-shadow(@shadow-top);
        }

        &.plat-drawer-transition-bottom {
            .box-shadow(@shadow-bottom);
        }

        &.plat-transition-init {
            -webkit-transition: -webkit-transform @transition-time @transition-function;
            -moz-transition: -moz-transform @transition-time @transition-function;
            transition: transform @transition-time @transition-function;
        }
    }
}

/// =========== File Declaration =========== ///

& {
    #platui > #mixins;
    #platui > #File;

    .plat-file {
        .box-sizing(border-box);
        display: inline-block;
        height: @height;
        width: @width;
        cursor: text;

        .plat-file-container {
            .box-sizing(border-box);
            height: 100%;
            margin: 0;
            padding: 0 @button-width 0 0;
            position: relative;

            .plat-file-hidden {
                visibility: hidden;
                position: absolute;
                top: 0;
                left: @global-hidden-left;
            }

            .plat-file-input {
                .box-sizing(border-box);
                .border-top-left-radius(@border-radius);
                .border-bottom-left-radius(@border-radius);
                .border-top-right-radius(0px);
                .border-bottom-right-radius(0px);
                position: relative;
                height: 100%;
                width: 100%;
                padding: 0 0.5em;
                text-align: right;
                background-color: @input-background-color;
                color: @text-color;
                border: 1px solid @input-border-color;
                border-right: none;
                outline: none;
                font: inherit;
                -webkit-appearance: none;

                &::-ms-clear,
                &::-ms-reveal {
                    display: none;
                }

                &::-webkit-outer-spin-button,
                &::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                    margin: 0;
                }
            }

            .plat-file-button {
                .border-top-left-radius(0px);
                .border-bottom-left-radius(0px);
                .border-top-right-radius(@border-radius);
                .border-bottom-right-radius(@border-radius);
                .webkit-touch-additions();
                position: absolute;
                top: 0;
                right: 0;
                margin: 0;
                height: 100%;
                width: @button-width;
                background-color: @button-background-color;
                color: @button-color;
                border: 0px solid @button-background-color;
                outline: none;
                font: inherit;

                &:active {
                    background-color: darken(@button-background-color, 10%);
                }

                &[disabled],
                &:disabled {
                    background-color: @button-background-color;
                    opacity: 0.5;
                    cursor: default;
                }
            }
        }

        &.file-outline {
            .plat-file-button {
                border-color: @button-background-color;
                color: @button-background-color;
                border-width: 2px;

                &:active {
                    color: @white;
                    background-color: @button-background-color;
                }

                &[disabled],
                &:disabled {
                    color: @button-background-color;
                    background-color: transparent;
                    opacity: 0.5;
                    cursor: default;
                }
            }
        }

        &.file-primary {
            .plat-file-button {
                background-color: @primary-color;
                border-color: darken(@primary-color, 10%);

                &:active {
                    background-color: darken(@primary-color, 10%);
                }

                &[disabled],
                &:disabled {
                    background-color: @primary-color;
                    opacity: 0.5;
                    cursor: default;
                }
            }

            &.file-outline {
                .plat-file-button {
                    border-color: @primary-color;
                    color: @primary-color;

                    &:active {
                        color: @white;
                        background-color: @primary-color;
                    }

                    &[disabled],
                    &:disabled {
                        color: @primary-color;
                        background-color: transparent;
                        opacity: 0.5;
                        cursor: default;
                    }
                }
            }
        }

        &.file-secondary {
            .plat-file-button {
                background-color: @secondary-color;
                border-color: darken(@secondary-color, 10%);

                &:active {
                    background-color: darken(@secondary-color, 10%);
                }

                &[disabled],
                &:disabled {
                    background-color: @secondary-color;
                    opacity: 0.5;
                    cursor: default;
                }
            }

            &.file-outline {
                .plat-file-button {
                    border-color: @secondary-color;
                    color: @secondary-color;

                    &:active {
                        color: @white;
                        background-color: @secondary-color;
                    }

                    &[disabled],
                    &:disabled {
                        color: @secondary-color;
                        background-color: transparent;
                        opacity: 0.5;
                        cursor: default;
                    }
                }
            }
        }

        &.file-neutral {
            .plat-file-button {
                background-color: @neutral-color;
                border-color: darken(@neutral-color, 10%);

                &:active {
                    background-color: darken(@neutral-color, 10%);
                }

                &[disabled],
                &:disabled {
                    background-color: @neutral-color;
                    opacity: 0.5;
                    cursor: default;
                }
            }

            &.file-outline {
                .plat-file-button {
                    border-color: @neutral-color;
                    color: @neutral-color;

                    &:active {
                        color: @white;
                        background-color: @neutral-color;
                    }

                    &[disabled],
                    &:disabled {
                        color: @neutral-color;
                        background-color: transparent;
                        opacity: 0.5;
                        cursor: default;
                    }
                }
            }
        }

        &.file-success {
            .plat-file-button {
                background-color: @success-color;
                border-color: darken(@success-color, 10%);

                &:active {
                    background-color: darken(@success-color, 10%);
                }

                &[disabled],
                &:disabled {
                    background-color: @success-color;
                    opacity: 0.5;
                    cursor: default;
                }
            }

            &.file-outline {
                .plat-file-button {
                    border-color: @success-color;
                    color: @success-color;

                    &:active {
                        color: @white;
                        background-color: @success-color;
                    }

                    &[disabled],
                    &:disabled {
                        color: @success-color;
                        background-color: transparent;
                        opacity: 0.5;
                        cursor: default;
                    }
                }
            }
        }

        &.file-danger {
            .plat-file-button {
                background-color: @danger-color;
                border-color: darken(@danger-color, 10%);

                &:active {
                    background-color: darken(@danger-color, 10%);
                }

                &[disabled],
                &:disabled {
                    background-color: @danger-color;
                    opacity: 0.5;
                    cursor: default;
                }
            }

            &.file-outline {
                .plat-file-button {
                    border-color: @danger-color;
                    color: @danger-color;

                    &:active {
                        color: @white;
                        background-color: @danger-color;
                    }

                    &[disabled],
                    &:disabled {
                        color: @danger-color;
                        background-color: transparent;
                        opacity: 0.5;
                        cursor: default;
                    }
                }
            }
        }

        &.file-caution {
            .plat-file-button {
                background-color: @caution-color;
                border-color: darken(@caution-color, 10%);

                &:active {
                    background-color: darken(@caution-color, 10%);
                }

                &[disabled],
                &:disabled {
                    background-color: @caution-color;
                    opacity: 0.5;
                    cursor: default;
                }
            }

            &.file-outline {
                .plat-file-button {
                    border-color: @caution-color;
                    color: @caution-color;

                    &:active {
                        color: @white;
                        background-color: @caution-color;
                    }

                    &[disabled],
                    &:disabled {
                        color: @caution-color;
                        background-color: transparent;
                        opacity: 0.5;
                        cursor: default;
                    }
                }
            }
        }

        &.file-outline {
            .plat-file-button {
                background-color: transparent;
            }
        }
    }
}

#platui {
    #grid {
	    @base-percent: 100%;
	    @num-columns: 12;
	    @column-padding: 0px;
    }
}

#platui {
    #__mixins {
        #platui > #grid;

        .generate-full-width-cols(@size) {
	        [class*="col-@{size}"] {
		        width: @base-percent;
	        }
        }

        .generate-partial-width-cols(@size; @i: @num-columns) when (@i > 0) {
	        .col-@{size}-@{i} {
		        width: @base-percent * (@i / @num-columns);
	        }
	        .generate-partial-width-cols(@size; (@i - 1));
        }

        .generate-offset-cols(@size; @i: @num-columns) when (@i > 0) {
	        .col-@{size}-offset-@{i} {
		        margin-left: @base-percent * (@i / @num-columns);
	        }
	        .generate-offset-cols(@size; (@i - 1));
        }

        .generate-shiftable-cols(@size; @i: @num-columns) when (@i > 0) {
	        .col-@{size}-push-@{i} {
		        left: @base-percent * (@i / @num-columns);
	        }
	        .col-@{size}-pull-@{i} {
		        right: @base-percent * (@i / @num-columns);
	        }
	        .generate-shiftable-cols(@size; (@i - 1));
        }
    }
}

& {
    #platui > #variables;
    #platui > #__mixins;
    #platui > #grid;
    #platui > #media;

/// ======= Grid Styles ======== ///

    [class*='col-'],
    [class*='col-']::after,
    [class*='col-']::before {
        #platui > #mixins > .box-sizing(border-box);
	    margin: 0;
    }

	[class*='col-']::after,
    [class*='col-']::before {
	    padding: 0;
    }

    [class*='col-'] {
	    position: relative;
	    float: left;
	    padding: @column-padding;
    }

    .row::after {
	    content: "";
	    display: table;
	    clear: both;
    }

/// ======= Grid Column Generation ======== ///

    /// Initial declarations
	.generate-full-width-cols(@phablet-alias);
	.generate-full-width-cols(@tablet-alias);
	.generate-full-width-cols(@desktop-alias);
	.generate-full-width-cols(@hd-alias);
	.generate-full-width-cols(@xhd-alias);

	/// Phone
	.generate-partial-width-cols(@phone-alias);
	.generate-offset-cols(@phone-alias);
	.generate-shiftable-cols(@phone-alias);

	/// Phablet
	.phb({
		.generate-partial-width-cols(@phablet-alias);
		.generate-offset-cols(@phablet-alias);
		.generate-shiftable-cols(@phablet-alias);
	});

	/// Tablet
	.tab({
		.generate-partial-width-cols(@tablet-alias);
		.generate-offset-cols(@tablet-alias);
		.generate-shiftable-cols(@tablet-alias);
	});

	/// Desktop
	.dsk({
		.generate-partial-width-cols(@desktop-alias);
		.generate-offset-cols(@desktop-alias);
		.generate-shiftable-cols(@desktop-alias);
	});

    /// HD
    .hd({
		.generate-partial-width-cols(@hd-alias);
		.generate-offset-cols(@hd-alias);
		.generate-shiftable-cols(@hd-alias);
    });

    /// XHD
    .xhd({
		.generate-partial-width-cols(@xhd-alias);
		.generate-offset-cols(@xhd-alias);
		.generate-shiftable-cols(@xhd-alias);
    });
}

@font-face {
  font-family: 'platypus-icons';
  src: url('fonts/icons.eot');
  src: url('fonts/icons.eot?#iefix') format('embedded-opentype'),
       url('fonts/icons.woff') format('woff'),
       url('fonts/icons.ttf') format('truetype'),
       url('fonts/icons.svg?#platypus-icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "platypus-icons";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
}

[class*="icon-1.5x"] {
  font-size: 150%;
}

[class*="icon-2x"] {
  font-size: 200%;
}

[class*="icon-3x"] {
  font-size: 300%;
}

.icon-arrow-down:before { content: '\e800'; }
.icon-arrow-left:before { content: '\e801'; }
.icon-arrow-right:before { content: '\e802'; }
.icon-arrow-up:before { content: '\e803'; }
.icon-camera:before { content: '\e804'; }
.icon-checkbox:before { content: '\e805'; }
.icon-checkmark:before { content: '\e806'; }
.icon-close:before { content: '\e807'; }
.icon-heart-o:before { content: '\e808'; }
.icon-cog:before { content: '\e808'; }
.icon-heart:before { content: '\e809'; }
.icon-download:before { content: '\e80a'; }
.icon-envelope:before { content: '\e80b'; }
.icon-exclamation-o:before { content: '\e80c'; }
.icon-exclamation:before { content: '\e80d'; }
.icon-eye:before { content: '\e80e'; }
.icon-desktop:before { content: '\e810'; }
.icon-link:before { content: '\e811'; }
.icon-paperclip:before { content: '\e812'; }
.icon-phone:before { content: '\e813'; }
.icon-pinned:before { content: '\e814'; }
.icon-refresh-a:before { content: '\e815'; }
.icon-refresh:before { content: '\e816'; }
.icon-search:before { content: '\e817'; }
.icon-tablet:before { content: '\e818'; }
.icon-user-girl:before { content: '\e819'; }
.icon-user:before { content: '\e81a'; }*/

/// =========== Image Declaration =========== ///

& {
    #platui > #mixins;
    #platui > #Image;

    .plat-image {
        .box-sizing(border-box);
        display: inline-block;
        position: relative;
        max-width: 100%;
        max-height: 100%;

        .plat-load-image {
            position: absolute;
            top: 0;
            left: @global-hidden-left;
        }

        img:not(.plat-load-image) {
            position: relative;
            display: block;
            margin: 0 auto;
            max-width: 100%;
            max-height: 100%;
        }

        .plat-ring.plat-image-ring {
            .box-sizing(border-box);
            position: relative;
            margin: 0 auto;
            display: block;
        }

        &.plat-background {
            background-repeat: no-repeat;
            background-size: contain;
        }

        &.image-center {
            img:not(.plat-load-image),
            .plat-ring.plat-image-ring {
                .translate-accelerate(0;-50%);
                top: 50%;
            }

            &.plat-background {
                background-position: center;
            }
        }

        &.plat-image-error {
            background-color: #ececec;
            min-height: 25px;
            min-width: 25px;

            &::before {
                .translate-accelerate(-50%;-50%);
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                display: block;
                max-height: 200px;
                max-width: 200px;
                top: 50%;
                left: 50%;
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
                background-image: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QMqaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjUtYzAyMSA3OS4xNTQ5MTEsIDIwMTMvMTAvMjktMTE6NDc6MTYgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUQzMEY0OEYwQzQ3MTFFNEE4Q0U5QTgwM0QzRDVCQzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUQzMEY0OTAwQzQ3MTFFNEE4Q0U5QTgwM0QzRDVCQzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxRDMwRjQ4RDBDNDcxMUU0QThDRTlBODAzRDNENUJDMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxRDMwRjQ4RTBDNDcxMUU0QThDRTlBODAzRDNENUJDMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv/iDFhJQ0NfUFJPRklMRQABAQAADEhMaW5vAhAAAG1udHJSR0IgWFlaIAfOAAIACQAGADEAAGFjc3BNU0ZUAAAAAElFQyBzUkdCAAAAAAAAAAAAAAAAAAD21gABAAAAANMtSFAgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEWNwcnQAAAFQAAAAM2Rlc2MAAAGEAAAAbHd0cHQAAAHwAAAAFGJrcHQAAAIEAAAAFHJYWVoAAAIYAAAAFGdYWVoAAAIsAAAAFGJYWVoAAAJAAAAAFGRtbmQAAAJUAAAAcGRtZGQAAALEAAAAiHZ1ZWQAAANMAAAAhnZpZXcAAAPUAAAAJGx1bWkAAAP4AAAAFG1lYXMAAAQMAAAAJHRlY2gAAAQwAAAADHJUUkMAAAQ8AAAIDGdUUkMAAAQ8AAAIDGJUUkMAAAQ8AAAIDHRleHQAAAAAQ29weXJpZ2h0IChjKSAxOTk4IEhld2xldHQtUGFja2FyZCBDb21wYW55AABkZXNjAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAEnNSR0IgSUVDNjE5NjYtMi4xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABYWVogAAAAAAAA81EAAQAAAAEWzFhZWiAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAG+iAAA49QAAA5BYWVogAAAAAAAAYpkAALeFAAAY2lhZWiAAAAAAAAAkoAAAD4QAALbPZGVzYwAAAAAAAAAWSUVDIGh0dHA6Ly93d3cuaWVjLmNoAAAAAAAAAAAAAAAWSUVDIGh0dHA6Ly93d3cuaWVjLmNoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGRlc2MAAAAAAAAALklFQyA2MTk2Ni0yLjEgRGVmYXVsdCBSR0IgY29sb3VyIHNwYWNlIC0gc1JHQgAAAAAAAAAAAAAALklFQyA2MTk2Ni0yLjEgRGVmYXVsdCBSR0IgY29sb3VyIHNwYWNlIC0gc1JHQgAAAAAAAAAAAAAAAAAAAAAAAAAAAABkZXNjAAAAAAAAACxSZWZlcmVuY2UgVmlld2luZyBDb25kaXRpb24gaW4gSUVDNjE5NjYtMi4xAAAAAAAAAAAAAAAsUmVmZXJlbmNlIFZpZXdpbmcgQ29uZGl0aW9uIGluIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAdmlldwAAAAAAE6T+ABRfLgAQzxQAA+3MAAQTCwADXJ4AAAABWFlaIAAAAAAATAlWAFAAAABXH+dtZWFzAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAACjwAAAAJzaWcgAAAAAENSVCBjdXJ2AAAAAAAABAAAAAAFAAoADwAUABkAHgAjACgALQAyADcAOwBAAEUASgBPAFQAWQBeAGMAaABtAHIAdwB8AIEAhgCLAJAAlQCaAJ8ApACpAK4AsgC3ALwAwQDGAMsA0ADVANsA4ADlAOsA8AD2APsBAQEHAQ0BEwEZAR8BJQErATIBOAE+AUUBTAFSAVkBYAFnAW4BdQF8AYMBiwGSAZoBoQGpAbEBuQHBAckB0QHZAeEB6QHyAfoCAwIMAhQCHQImAi8COAJBAksCVAJdAmcCcQJ6AoQCjgKYAqICrAK2AsECywLVAuAC6wL1AwADCwMWAyEDLQM4A0MDTwNaA2YDcgN+A4oDlgOiA64DugPHA9MD4APsA/kEBgQTBCAELQQ7BEgEVQRjBHEEfgSMBJoEqAS2BMQE0wThBPAE/gUNBRwFKwU6BUkFWAVnBXcFhgWWBaYFtQXFBdUF5QX2BgYGFgYnBjcGSAZZBmoGewaMBp0GrwbABtEG4wb1BwcHGQcrBz0HTwdhB3QHhgeZB6wHvwfSB+UH+AgLCB8IMghGCFoIbgiCCJYIqgi+CNII5wj7CRAJJQk6CU8JZAl5CY8JpAm6Cc8J5Qn7ChEKJwo9ClQKagqBCpgKrgrFCtwK8wsLCyILOQtRC2kLgAuYC7ALyAvhC/kMEgwqDEMMXAx1DI4MpwzADNkM8w0NDSYNQA1aDXQNjg2pDcMN3g34DhMOLg5JDmQOfw6bDrYO0g7uDwkPJQ9BD14Peg+WD7MPzw/sEAkQJhBDEGEQfhCbELkQ1xD1ERMRMRFPEW0RjBGqEckR6BIHEiYSRRJkEoQSoxLDEuMTAxMjE0MTYxODE6QTxRPlFAYUJxRJFGoUixStFM4U8BUSFTQVVhV4FZsVvRXgFgMWJhZJFmwWjxayFtYW+hcdF0EXZReJF64X0hf3GBsYQBhlGIoYrxjVGPoZIBlFGWsZkRm3Gd0aBBoqGlEadxqeGsUa7BsUGzsbYxuKG7Ib2hwCHCocUhx7HKMczBz1HR4dRx1wHZkdwx3sHhYeQB5qHpQevh7pHxMfPh9pH5Qfvx/qIBUgQSBsIJggxCDwIRwhSCF1IaEhziH7IiciVSKCIq8i3SMKIzgjZiOUI8Ij8CQfJE0kfCSrJNolCSU4JWgllyXHJfcmJyZXJocmtyboJxgnSSd6J6sn3CgNKD8ocSiiKNQpBik4KWspnSnQKgIqNSpoKpsqzysCKzYraSudK9EsBSw5LG4soizXLQwtQS12Last4S4WLkwugi63Lu4vJC9aL5Evxy/+MDUwbDCkMNsxEjFKMYIxujHyMioyYzKbMtQzDTNGM38zuDPxNCs0ZTSeNNg1EzVNNYc1wjX9Njc2cjauNuk3JDdgN5w31zgUOFA4jDjIOQU5Qjl/Obw5+To2OnQ6sjrvOy07azuqO+g8JzxlPKQ84z0iPWE9oT3gPiA+YD6gPuA/IT9hP6I/4kAjQGRApkDnQSlBakGsQe5CMEJyQrVC90M6Q31DwEQDREdEikTORRJFVUWaRd5GIkZnRqtG8Ec1R3tHwEgFSEtIkUjXSR1JY0mpSfBKN0p9SsRLDEtTS5pL4kwqTHJMuk0CTUpNk03cTiVObk63TwBPSU+TT91QJ1BxULtRBlFQUZtR5lIxUnxSx1MTU19TqlP2VEJUj1TbVShVdVXCVg9WXFapVvdXRFeSV+BYL1h9WMtZGllpWbhaB1pWWqZa9VtFW5Vb5Vw1XIZc1l0nXXhdyV4aXmxevV8PX2Ffs2AFYFdgqmD8YU9homH1YklinGLwY0Njl2PrZEBklGTpZT1lkmXnZj1mkmboZz1nk2fpaD9olmjsaUNpmmnxakhqn2r3a09rp2v/bFdsr20IbWBtuW4SbmtuxG8eb3hv0XArcIZw4HE6cZVx8HJLcqZzAXNdc7h0FHRwdMx1KHWFdeF2Pnabdvh3VnezeBF4bnjMeSp5iXnnekZ6pXsEe2N7wnwhfIF84X1BfaF+AX5ifsJ/I3+Ef+WAR4CogQqBa4HNgjCCkoL0g1eDuoQdhICE44VHhauGDoZyhteHO4efiASIaYjOiTOJmYn+imSKyoswi5aL/IxjjMqNMY2Yjf+OZo7OjzaPnpAGkG6Q1pE/kaiSEZJ6kuOTTZO2lCCUipT0lV+VyZY0lp+XCpd1l+CYTJi4mSSZkJn8mmia1ZtCm6+cHJyJnPedZJ3SnkCerp8dn4uf+qBpoNihR6G2oiailqMGo3aj5qRWpMelOKWpphqmi6b9p26n4KhSqMSpN6mpqhyqj6sCq3Wr6axcrNCtRK24ri2uoa8Wr4uwALB1sOqxYLHWskuywrM4s660JbSctRO1irYBtnm28Ldot+C4WbjRuUq5wro7urW7LrunvCG8m70VvY++Cr6Evv+/er/1wHDA7MFnwePCX8Lbw1jD1MRRxM7FS8XIxkbGw8dBx7/IPci8yTrJuco4yrfLNsu2zDXMtc01zbXONs62zzfPuNA50LrRPNG+0j/SwdNE08bUSdTL1U7V0dZV1tjXXNfg2GTY6Nls2fHadtr724DcBdyK3RDdlt4c3qLfKd+v4DbgveFE4cziU+Lb42Pj6+Rz5PzlhOYN5pbnH+ep6DLovOlG6dDqW+rl63Dr++yG7RHtnO4o7rTvQO/M8Fjw5fFy8f/yjPMZ86f0NPTC9VD13vZt9vv3ivgZ+Kj5OPnH+lf65/t3/Af8mP0p/br+S/7c/23////uAA5BZG9iZQBkwAAAAAH/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQECAgICAgICAgICAgMDAwMDAwMDAwMBAQEBAQEBAgEBAgICAQICAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA//AABEIAUoBpwMBEQACEQEDEQH/xACaAAEAAQUBAQEBAAAAAAAAAAAACAEDBAUHBgIJCgEBAQEBAQAAAAAAAAAAAAAAAAEDAgQQAAEDAgMDBwgHBAkDBQEAAAABAgMRBCESBVGSBjFB0RNTNJdhgSKzdHW1B3GRMhTUVRexQmI2oVJygrIjM7QV8MEWokNjcyUIEQEBAAIDAQEAAwAAAAAAAAAAARECMVEyEiFhcRP/2gAMAwEAAhEDEQA/AP7a71zlvLtarm+9zLmVVVyIkj0yoq4ogGP1knaP3ndIDrJO0fvO6QHWSdo/ed0gOsk7R+87pAdZJ2j953SA6yTtH7zukB1knaP3ndIDrJO0fvO6QHWSdo/ed0gOsk7R+87pAdZJ2j953SA6yTtH7zukB1knaP3ndIDrJO0fvO6QHWSdo/ed0gOsk7R+87pAdZJ2j953SA6yTtH7zukB1knaP3ndIDrJO0fvO6QHWSdo/ed0gOsk7R+87pAdZJ2j953SA6yTtH7zukB1knaP3ndIDrJO0fvO6QHWSdo/ed0gOsk7R+87pAdZJ2j953SA6yTtH7zukB1knaP3ndIDrJO0fvO6QHWSdo/ed0gOsk7R+87pAdZJ2j953SA6yTtH7zukB1knaP3ndIDrJO0fvO6QHWSdo/ed0gOsk7R+87pAdZJ2j953SA6yTtH7zukB1knaP3ndIDrJO0fvO6QHWSdo/ed0gOsk7R+87pAdZJ2j953SA6yTtH7zukB1knaP3ndIDrJO0fvO6QHWSdo/ed0gZ+mves8vpO7jqjlVVVVWmmXeVK8qUXEDGvO+XftM/rXAYwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABsNN7xN7v1X4bdgWLzvl37TP61wGMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAbDTe8Te79V+G3YFi875d+0z+tcBjAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGw03vE3u/Vfht2BYvO+XftM/rXAYwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABsNN7xN7v1X4bdgWLzvl37TP61wGMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAbDTe8Te79V+G3YFi875d+0z+tcBjAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGw03vE3u/Vfht2BYvO+XftM/rXAYwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABsNN7xN7v1X4bdgWLzvl37TP61wGMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAbDTe8Te79V+G3YFi875d+0z+tcBjAAAAAAAAAAAAAAAAAAAAAAAAAAA2+TlA+XPYxMz3sY2lcz3NY2n9pyohZLeBaiurWd2WG5t5Xf1Y54nrh5EcqqLLORf5f2EAAAAAAAAAAAAAAAAAAAAAAAAAAAAGw03vE3u/Vfht2BYvO+XftM/rXAYwAAAAAAAAAAAAAAAAAAAAAAAAAAYl5eQWFvc3ly5I4oLdz5pVwa2COrms8j3vrjygQo42+YWscVXtwjbu6stKSR0NtZwvcyJ0MblYkj1bRyvkpX6DXThK8bZ6nqOm3MVxp95c2kseVWrE+RG1RaosuZy5kcu3nG/BEw/lfx1/5hpkkN8sbdX01rUuEbyzNVUZnp5EWpkrqIAAAAAAAAAAAAAAAAAAAAAAAAAAANhpveJvd+q/DbsCxed8u/aZ/WuAxgAAAAAAAAAAAAAAAAAAAAAAAAAA4D87+L0stPj4as5k+83zEmvci1clqjla2F9OT0kVaeU218oiwqUVMETBtFT95MqZXL5ctE8x0KelijaZla5EVeSqoqAew4F4ml4S4isdRV2W3erLfUIk+zJBInVy5uZMrXVOd/InhBcQXMMF1A9JYrmNJIZUWqZHMzI5F51yoqecxVeAAAAAAAAAAAAAAAAAAAAAAAAAADYab3ib3fqvw27AsXnfLv2mf1rgMYAAAAAAAAAAAAAAAAAAAAAAAAAa7VtRt9J0281O5ejYLGOR7notGuaxtWou1z3rTaBAXiHW7niHWb7V7lyq+7lc5iVqjIMGxMbsasbUWhtr5RpDoOZU5l5QC0XBa0X0Xf2VwX+gCW/yU4s/5bR5OH7qWt7pSVtetfV0unVSitzLytflwObrMDt5ioAAAAAAAAAAAAAAAAAAAAAAAAANhpveJvd+q/DbsCxed8u/aZ/WuAxgAAAAAAAAAAAAAAAAAAAAAADl8nl2AfStxTL6X9b/AK5sQI0/PPizJ934TspcFpeaosfIis/07dzkXBH5qqnOa/ERGxOT61psqtUTzHcmJgVAAVTlTGgHo+FNfl4Z16y1aNzstvLSZrcWyWz1yzRubVEVOrVVbsciKS8Ce1leRahZWl7avSSC6hjlZKmLXZkzORKLysTBfKYKzAAAAAAAAAAAAAAAAAAAAAAAAABsNN7xN7v1X4bdgWLzvl37TP61wGMAAAAAAAAAAAAAAAAAAAAAAAfTWnk5fN5QNJxDrVvw9omoardPbHHaQLIjVdR0srsIIWqvIsr1oq40TmUCAurapc6xqN5qVzIr5byVZZMy5uRV6tEXCiNatPKeiI1oFfr8yVX6gHNXk51qjko3b9nECtKUVfSa6tFauHItFrSqAEVUblREXkpVaJXDl8i0AlF8j+LfvNpPwreTL19n/nadnWue3Vazx48isdRUxWpn/n/JlIP6DNQAAAAAAAAAAAAAAAAAAAAAAAA2Gm94m936r8NuwLF53y79pn9a4DGAAAAAAAAAAAAAAAAAAAAAAAEWqrlXMrV/dSuKLypyVxAit88OKnXd/b8L2cmeDT3Oub+RiplmleitbG5UVapErq/Sh38bDgRqgtEStUwxVOdE5M1P6tQOocIfKnW+KWRXkr2abpz8Y7iZsiyytwVXxRo9jXM5q7UU5u0nI9pqfyE1GCF8uma3HfTtRcsEtssHWURfQRyyS1VVwoT7hhwrUdPvdKup7DUIJLa7hdSWJzMraItMza4q1XFm0v5BgYc/Jz/QdDcaDrFxoOsWerWrla+3njVzG19K3aqq+NVqmbOBPzR9Tg1rTLLVLVyPhvYGyoraKjHKidYxcVosb6oYXlWy/wCq8y7FTyKQAAAAAAAAAAAAAAAAAAAAAAAGw03vE3u/Vfht2BYvO+XftM/rXAYwAAAAAAAAAAAAAAAAAAAAAFFSrXc1GqvmQDzfGPElvwtomoavLlZIyJYrGJrkrJdZP8tuX95c9KlnMEB7y7nvry7vbiRz5riWSWRzlqrkeqqjErsqboxgN5wxp7dU4h0qwe1FZdXdtG5VT7TGve5zHV/cwA/QaCCK1tra1gY2KC3jSGOJjURkbI1yUjwT0XUr9KqZb8kXnKiV6v0KJmRzftNcz0m5K87lQ4VGv5/6Pbx/8NrjET7zPI6wuZGtok2WJ0yPfTBVqw609CNZsgBI/wCRvFyMWfhS9lVGyZ7vTEe7BM/+XLbpVftK9manlMbLlUmFzVo5ERWo1qon8DUannomPlOeORQAAAAAAAAAAAAAAAAAAAAAABsNN7xN7v1X4bdgWLzvl37TP61wGMAAAAAAAAAAAAAAAAAAAAABVMFqqVRMVTaiYqnnRAIhfObixdW1huhWcqrYaT6EyouEt8iosjXcy5FqWcz+xxU3QA9lwB/OPD3tzP2SAT15k/vf43Ge/JFDNXBfn/8Ay/ofvZ/+0nOtPQimbIAbLS9Rn0m+tdRtnujltJmTMci0VzkVEdFypg5EqBPvh7WrfiTRdP1W0dVt3bo59OVJ2OWK4b/duGOQx39K3NKYLzHIAAAAAAAAAAAAAAAAAAAAAAbDTe8Te79V+G3YFi875d+0z+tcBjAAAAAAAAAAAAAAAAAAAAAoq4Im1yJTbWoHi+P+KmcK8PXl817UvpWvt9Njr6SzvRWMfReaNy1O9PQgnLI+aaWWRcz5pJZJHKtfTeqvc6v8T/2mqLQAD2XAH848Pe3M/ZIBPXmT+9/jcZ78kUM1cF+f/wDL+h+9n/7Sc609CKZsgAA758keLFsdRk4Zu5US21By3Vm57kRsV01Mj46quCyoxFROepjv6VKpMtERtaYrReRub0sqf2a0U5AAAAAAAAAAAAAAAAAAAAAADYab3ib3fqvw27AsXnfLv2mf1rgMYAAAAAAAAAAAAAAAAAAAAFFRKKq1RWorkdzNpiqqvNgBDL5t8XLxHxC+ztpM2m6VWC3o6rJnphLMiJ+8slUU609Dk6YJTmojfMioqJ5lQ2QAAey4A/nHh725n7JAJ68yf3v8bjPfkihmrgvz/wD5f0P3s/8A2k51p6EUzZAABk2V3LY3MF1A90c9tPHcRPbgrXR0VrkcmKK5yKi+RCYl5E9+DuJLfinQLDVo8JZImtvWJRUhumJllRyJjVz0V3nM95JfxXplRyUzZaolPRxR2NUcvlOAAAAAAAAAAAAAAAAAAAAABsNN7xN7v1X4bdgWLzvl37TP61wGMAAAAAAAAAAAAAAAAAAADyVo5VSleRU/e56+igHOPmhxYzhjhq5WNXR3+oZrOzbWrqK1EkuURKOypmSmzE711l5EIXVcqvcqufmcj3rVVe5VzK5F5MrlWp3NZLlFDoAAHsuAP5x4e9uZ+yQCevMn97/G4z35IoZq4L8//wCX9D97P/2k51p6EUzZAAA5qYcvLz8nJ9AHa/kvxY3SNcTQ72fJYasvVxtf9hl29qRxvxciJmciV8plvyRLpEolFSitXIqVrRWeiq/Qq8hwqoAAAAAAAAAAAAAAAAAAAANhpveJvd+q/DbsCxed8u/aZ/WuAxgAAAAAAAAAAAAAAAAAAA+ZHIxiyPVrWMzPV6rRGNa3NIrvI5qJTZQ711zMiEHzM4tl4o4munskz6dYPdZ2DOVjoI1yyScyK58iKlacx3rr8o53+61qcjFdl/sL9lq7VTadCgAAB7HgCv8A5hw8qJX/APQY3/0vWv8ASBPdyUon0/4nGe/JHz5zNXBfn/8Ay/oXl1Z/+0nOtPQimbIAAAFyJ0kcsUsMixTRSNkhenK2WNUexyKip9lyIpztr9Cdvy+4nj4q4as750iLexMZBfsqir95YlFetKZUkRFXnM9tflXtcf8AuvkTb9aocgAAAAAAAAAAAAAAAAAAAGw03vE3u/Vfht2BYvO+XftM/rXAYwAAAAAAAAAAAAAAAAAAc1eZFRF8la4r5MAOTfN3iv8A8f4dfY2siN1HWq28dFo+K3Yq9ZL/AA5ldRNprpwlQxqtXY1RVzJVMUrg7lx9J6K7znYqAAAAPTcG3TbPijQbmR2WGPUoutfT7NWqiV+nMgH6Aq5HI1yLgrWurzemnWNx5MWuRfOZb8kUVMFrXBMyYctF5E2qcKjv8/ruNNN0GwWRv3j78+6dEi+k2H7rMxFcn7q53JgdaehGE2QAAAK1w5acyU5UzYOci+RoHWvlHxcnDvETLGd6M03WHMtZc2LYplcjYpUStEVy0RV5qnG/BEzFSqRrVcGLimKORVTLVUwxTk+gyVQAAAAAAAAAAAAAAAAAAANhpveJvd+q/DbsCxed8u/aZ/WuAxgAAAAAAAAAAAAAAAAABZnuI7aCWedzWQwRTSzOeqNakLER6q5VoiZVby+UuLRBLjviV/FPEd5qLnO+7xPW1sI0VVYyCJVRHNRMKPeqrXkVDXSYiPGuRapVUWjUTClMFVf+50KAAAAAiq1zXte9q5kz5a+i1q1Y9lP/AHEcq8nMBI3gr50wWdjbabxRFNJ92RIYdRha2ZzoGNRI3TxIjpFkbycnIiGe8tv4Pb6p87OD7S3e+xnuNVuV+zAllcwNXCrUkkkiZGqIuxTj5vSov8VcTahxZqsmqX761c5sEFfRtoscqN5nVTA61llHmzVAAAAAEzZmq1aKi+i5Fo5knLE9F5skqIqrzIcby2fgnD8sOLG8U8NQvmfW/wBOyWd4zMiu6yNFa1721zJnStK8pniq6NRdi/UQUAAAAAAAAAAAAAAAAAAGw03vE3u/Vfht2BYvO+XftM/rXAYwAAAAAAAAAAAAAAAAAA4l86OLv+I0iPQLWTJe6y5Ouelc0VnFVZFwxRJHOanmNtfMREaqqq15UVU6F87aKdAAAAAAAAAAAAAAAAAUVcU5UVMP4eR6/wB1lVA6R8suLZOF+IbdZXKmnahIljfR19FjpVT7vcKnJXrERK+U528ibqPjkSGSJc0aoixc/WNezMq+apiqoAAAAAAAAAAAAAAAAAA2Gm94m936r8NuwLF53y79pn9a4DGAAAAAAAAAAAAAAAAALF5e2thaXV7dSNigtoZZZ3uwSkTVc9E2LIuCfSBAXi7iC44n1681N6rK2SSSK0jVVpDAi4InNijam2vmI81jzpRfJyL5ToAAAAAA+oo5ZpI4oUzyyStiZCiYydYqNaqL/C6oEvOCPlHoek6fZ3eu28eq6tKxs0sVzX7ra9Y1HxxJG2r3SNjVFryGW/JHt9T4F4V1OB8Fxo9nlcio2W2YsFxCi4K6Fjmpmyt2qcZqoi8f8FS8F6y+1Y982n3NZLC7c2jpYV9JsEiVVGvjSi+Y709DwhqgAAAAABVVEwcrcUxTmx5fMc7eRM/5ScXJxFw82zuXtdqOj5LSRqu9KSBUzQztriuVGqi/SYq6uAAAAAAAAAAAAAAAAAANhpveJvd+q/DbsCxed8u/aZ/WuAxgAAAAAAAAAAAAAAAACPvzw4tW0sIOGbSROtv1bPqeV3px28ao6K1WiVRJX0Rec2+YiLeH7taLXyLsXkodSY/IHIiJzIlE+iqr+1QAAAAAAej4OfAnFWhpctasKX8Fc/2XLIqtRqrzI3LXzgfoHVeelcUwoqZWuVrKLzp1bUxMt+SKYfZpzOXNjVtEry8uJwqPX/8AQD4V03QUdlbcuv5nMRPt/d/u8tEXnpmop1p6EXzZAAAAAAGOFErVUSi8lFVEX+hRzyPccAcSP4W4ltNQV7ktJVSzvmIqox8Ejm5Vd/8AU6q15cDm6wTqhmjnhhnjej4pmteyRtHIsUqJJFJVFTFWrQxVcUAAAAAAAAAAAAAAAAA2Gm94m936r8NuwLF53y79pn9a4DGAAAAAAAAAAAAAAAAa3V9VtNF0u81W8dlt7SB07sURVytVVjTl/wAxaAQD4g1m61/V73VrtyPmu7h0qIubIxiK7q42JmVUYyuFVU9CNNRUwXl5+YCoAAAAAAPuN74pIpI3ZHxuWSN2KKkjaKio6tKpT+kCVnAvzi0W6sLTT+JJHadfwtbAt0/GCdI2o1sjlcqqkjkTE5uso9zqfzN4L02CSVdZt7yRGOVlraPzTSYYIqq2jEX6FJ8QyiXxzxhccZaut9LGtvbQN6qztsyqjGJhnciqvpq3ZTl5CzWS5HizoAAAAAAItMQFVoqcy83/AFzgS8+THFrNY0STRLySt/o7Uosiqsk9jJ/pKiquLoXNVEphlOPiGXaqUwrWmFdtOfzmd/KoQAAAAAAAAAAAAAAANhpveJvd+q/DbsCxed8u/aZ/WuAxgAAAAAAAAAAAAAABZ+3Ajb89OJJWJacMWz8rZepvb9M2FXPaqROamKNVrq7KHf8AmmUam+iipzrz7Po8xoKgAAAAAAAFxwVXKxUT0a4I6q4twwRQKqtUVqtY5tUVM6ZlaiNRMF5UWqAVq3DBcORy4uTyIq1on1AfNVXloic2WtVT+KqrUAAAAAAAAA+vzcvm8oHquDNfuOGOItO1ON1WI9lvOzMlJLWV3pI9eRVjdVaqBPeCZlxBDcRKjo54o5o3JyKyViPYqeRWuMLyq6QAAAAAAAAAAAAAAANhpveJvd+q/DbsCxed8u/aZ/WuAxgAAAAAAAAAAAAAAKolVRNq0xpT+nAs5/RD/wCeGnzwcXJqatcttqNjbLHIv2FW3t2xPY1cU6z0Vo1MVXmNfvVHGESvJjz15k+leRDoVovNim1MUX6FTBQFF2L9SgKLsX6lAUXYv1KAouxfqUBRdi/UoCi7F+pQFF2L9SgKLsX6lAUXYv1KAouxfqUBRdi/UoCi7F+pQFF2L9SgKLsX6lAUXYv1KAouxfqUBRU5Up5VwT61wAoioiotW4L/AFm9IGTZ28l1dW1rbtcrppmwtRGq5XOlfWrKItUai4ryIc/eo/QzR7Z9npGl2cmMlpp1jbPWtfTgtoonY8/pNMryrYkAAAAAAAAAAAAAAADYab3ib3fqvw27AsXnfLv2mf1rgMYAAAAAAAAAAAAAAByY7PJX+hMVA87xNwxpfFtg7T9ViR1EWSCZiI11pMmLVjXCqV2AcAvPkHq63DnafrWmSRLz3rLmKVE5kTq4JGqtPKbyxGIvyB4iXFdY0JV51c7UFXz0slQZnYfoBxD+b6Dvaj+BGZ2H6AcQ/m+g72o/gRmdh+gHEP5voO9qP4EZnYfoBxD+b6Dvaj+BGZ2H6AcQ/m+g72o/gRmdh+gHEP5voO9qP4EZnYfoBxD+b6Dvaj+BGZ2H6AcQ/m+g72o/gRmdh+gHEP5voO9qP4EZnYfoBxD+b6Dvaj+BGZ2H6AcQ/m+g72o/gRmdh+gHEP5voO9qP4EZnYfoBxD+b6Dvaj+BGZ2H6AcQ/m+g72o/gRmdh+gHEP5voO9qP4EZnYfoBxD+b6Dvaj+BGZ2KfoBxF+7rGgovMqO1D/vZIgzOxVPkDxNVK63oiJVK5X3qrTnoi2iIq/SLZgdO4K+U2l8LXEepXr/+V1SGqQOdhBEr8XuRr6ItF5DBXXuTDYAAAAAAAAAAAAAAAAAbDTe8Te79V+G3YFi875d+0z+tcBjAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGw03vE3u/Vfht2BYvO+XftM/rXAYwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABsNN7xN7v1X4bdgWLzvl37TP61wGMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAbDTe8Te79V+G3YFi875d+0z+tcBjAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGw03vE3u/Vfht2BYvO+XftM/rXAYwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABsNN7xN7v1X4bdgWLzvl37TP61wGMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAbDTe8Te79V+G3YFi875d+0z+tcBjAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGw03vE3u/Vfht2BYvO+XftM/rXAYwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABsNN7xN7v1X4bdgWLzvl37TP61wGMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAbDTe8Te79V+G3YFi+wvbzHkuJ8Fwx612OOOIGHmXYm8gDMuxN5AGZdibyAMy7E3kAZl2JvIAzLsTeQBmXYm8gDMuxN5AGZdibyAMy7E3kAZl2JvIAzLsTeQBmXYm8gDMuxN5AGZdibyAMy7E3kAZl2JvIAzLsTeQBmXYm8gDMuxN5AGZdibyAMy7E3kAZl2JvIAzLsTeQBmXYm8gDMuxN5AGZdibyAMy7E3kAZl2JvIAzLsTeQBmXYm8gDMuxN5AGZdibyAMy7E3kAZl2JvIAzLsTeQBmXYm8gDMuxN5AGZdibyAMy7E3kAZl2JvIAzLsTeQBmXYm8gDMuxN5AGZdibyAMy7E3kAZl2JvIAzLsTeQBmXYm8gDMuxN5AGZdibyAbDTXUnlxSq6fqvo521Smm3WNOWigewuP9eT+R/ty96/1/9Vf9T+Lb5QLXh+A8PwHh+A8PwHh+A8PwHh+A8PwHh+A8PwHh+A8PwHh+A8PwHh+A8PwHh+A8PwHh+A8PwHh+A8PwHh+A8PwHh+A8PwHh+A8PwHh+A8PwHh+A8PwHh+A8PwHh+A8PwHh+A8PwHh+A8PwHh+A8PwHh+A8PwHh+A8PwHh+A8PwHh+A8PwHh+Bl2n25P5I7ted25e6Tf6n/wdp/BUD//2Q%3D%3D);
            }
        }
    }
}

/// =========== Input Declaration =========== ///

& {
    #platui > #mixins;
    #platui > #Input;

    .plat-input {
        .border-radius(0px);
        .box-sizing(border-box);
        .appearance(none);
        display: inline-block;
        width: @width;
        height: @height;
        background-color: @background-color;
        color: @text-color;
        border: none;
        padding: 0;

        &::-ms-clear,
        &::-ms-reveal {
            display: none;
        }

        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

    /// =========== Placeholder Styling =========== ///

        &::-webkit-input-placeholder {
            color: @placeholder-color;
        }

        &::-moz-input-placeholder {
            color: @placeholder-color;
        }

        &:-moz-input-placeholder {
            color: @placeholder-color;
        }

        &:-ms-input-placeholder {
            color: @placeholder-color;
        }

        &:not(.input-outline) {
            border-bottom: @border-bottom-width @border-style @border-bottom-color;

            &:focus {
                border-color: @border-bottom-focus;
            }
        }

    /// ============== Secondary Input =============== ///

        &.input-outline {
            .border-radius(@outline-border-radius);
            border: @outline-border-width @border-style @outline-border-color;
            padding-left: 0.5em;
            padding-right: 0.5em;

            &:focus {
                border-color: @outline-border-focus;
            }
        }

    /// ============== Input Types =============== ///

        &.input-primary {
            &:focus {
                border-color: @primary-color;
            }
        }

        &.input-secondary {
            &:focus {
                border-color: @secondary-color;
            }
        }

        &.input-success {
            &:focus {
                border-color: @success-color;
            }
        }

        &.input-caution {
            &:focus {
                border-color: @caution-color;
            }
        }

        &.input-danger {
            &:focus {
                border-color: @danger-color;
            }
        }
    }
}

/// =========== Input Group Declaration =========== ///

& {
    .input-group {
        .plat-input {
            width: 100%;

            &:not(.input-outline) {
                &:not(:first-child) {
                    padding-left: 0.5em;
                }

                &:not(:last-child) {
                    padding-right: 0.5em;
                }
            }
        }

        [class*="col-"]:not(:first-child) {
            .plat-input:not(.input-outline) {
                padding-left: 0.5em;
            }
        }

        [class*="col-"]:not(:last-child) {
            .plat-input:not(.input-outline) {
                padding-right: 0.5em;
            }
        }
    }
}

/// ============= Listview Constants ============= ///

#platui {
    #__Listview {
        .plat-ring-constants(@orientation: vertical) {
            & when (@orientation = vertical) {
                height: 2.5em;
                width: 100%;
            }
            & when (@orientation = horizontal) {
                height: 100%;
                width: 2.5em;
            }

            .plat-listview-ring {
                #platui > #ProgressRing > .plat-ring(diameter; 2em);
                position: absolute;

                & when (@orientation = vertical) {
                    .translate-accelerate(-50%;0);
                    margin-top: 0.25em;
                    margin-bottom: 0.25em;
                    left: 50%;
                }
                & when (@orientation = horizontal) {
                    .translate-accelerate(0;-50%);
                    margin-left: 0.25em;
                    margin-right: 0.25em;
                    top: 50%;
                }
            }
        }
    }
}

/// =========== Listview Declarations =========== ///

& {
    #platui > #mixins;
    #platui > #Listview;
    #platui > #__Listview;

    .plat-listview {
        .fill();
        .box-sizing(border-box);
        position: relative;
        min-height: 50px;
        overflow: hidden;

        .plat-listview-viewport {
            .fill();
            .box-sizing(border-box);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            overflow: hidden;

            .plat-scroll-container {
                .fill();
                .box-sizing(border-box);
                position: absolute;
                left: 0;
                top: 0;
                -ms-overflow-style: -ms-autohiding-scrollbar;

                .plat-listview-container {
                    .box-sizing(border-box);
                    position: absolute;
                    left: 0;
                    top: 0;
                    margin: 0;
                    padding: 0;

                    .plat-listview-group {
                        .box-sizing(border-box);
                        position: relative;

                        .plat-header {
                            .box-sizing(border-box);
                            position: absolute;
                            top: 0;
                            left: 0;
                            max-height: 100%;
                        }

                        .plat-listview-items {
                            .box-sizing(border-box);
                            min-width: 1px;
                        }
                    }
                }
            }

            &.plat-manipulation-prep {
                .touch-action(none);
                background-color: @manipulated-viewport-background-color;
            }

            &.plat-transition-init {
                -webkit-transition: -webkit-transform @refresh-transition-time;
                -moz-transition: -moz-transform @refresh-transition-time;
                transition: transform @refresh-transition-time;
            }
        }

        .plat-refresh,
        .plat-incremental {
            position: absolute;
            z-index: 0;

            .plat-ring {
                .plat-animated-ring {
                    .animation-play-state(paused);
                }
            }

            &.plat-play {
                .plat-ring {
                    .plat-animated-ring {
                        .animation-play-state(running);
                    }
                }
            }
        }

        &.plat-vertical {
            .plat-listview-viewport {
                .plat-scroll-container {
                    .scroll(y);

                    .plat-listview-container {
                        width: 100%;
                        height: auto;

                        .plat-infinite {
                            .plat-ring-constants();
                            position: relative;
                        }
                    }
                }
            }

            .plat-refresh,
            .plat-incremental {
                .plat-ring-constants();
                left: 0;
            }

            .plat-refresh {
                top: 0;
            }

            .plat-incremental {
                bottom: 0;
            }
        }

        &.plat-horizontal {
            .plat-listview-viewport {
                .plat-scroll-container {
                    .scroll(x);

                    .plat-listview-container {
                        .flexbox();
                        width: auto;
                        height: 100%;

                        &.plat-grouped {
                            .flex-direction(row);
                            .flex-wrap(nowrap);
                            .align-items(stretch);

                            .plat-listview-group {
                                .flex(0 0 auto);
                                height: 100%;

                                .plat-listview-items {
                                    .inline-flexbox();
                                    .flex-direction(column);
                                    .flex-wrap(wrap);
                                    .align-content(flex-start);
                                    position: relative;
                                    height: 100%;

                                    & > * {
                                        .flex(0 0 auto);
                                    }
                                }
                            }
                        }

                        &:not(.plat-grouped) {
                            .flex-direction(column);
                            .flex-wrap(wrap);
                            .align-content(flex-start);

                            & > * {
                                .flex(0 0 auto);
                            }
                        }

                        .plat-infinite {
                            position: relative;
                        }
                    }
                }
            }

            .plat-refresh,
            .plat-incremental {
                .plat-ring-constants(horizontal);
                top: 0;
            }

            .plat-refresh {
                left: 0;
            }

            .plat-incremental {
                right: 0;
            }
        }

        &.plat-no-scroller {
            overflow: unset;

            .plat-listview-viewport {
                position: relative;
                overflow: unset;

                .plat-scroll-container {
                    position: relative;
                    overflow-x: unset;
                    overflow-y: unset;
                    -webkit-overflow-scrolling: auto;

                    .plat-listview-container {
                        position: relative;
                    }
                }
            }

            &.plat-vertical {
                height: auto;

                .plat-listview-viewport {
                    height: auto;

                    .plat-scroll-container {
                        height: auto;
                    }
                }
            }

            &.plat-horizontal {
                width: auto;

                .plat-listview-viewport {
                    width: auto;

                    .plat-scroll-container {
                        width: auto;
                    }
                }
            }
        }

        &.plat-animated {
            .plat-listview-viewport {
                .plat-scroll-container {
                    .plat-listview-container {
                        .plat-enter-init {
                            @enter-init();
                        }

                        .plat-enter {
                            .animation-name(@enter-animation-name);
                            .animation-duration(@enter-animation-duration);
                        }

                        .plat-leave {
                            .animation-name(@leave-animation-name);
                            .animation-duration(@leave-animation-duration);
                        }
                    }
                }
            }
        }
    }

    .enter(@enter-animation-name);
    .leave(@leave-animation-name);
}

/// =========== Modal Declaration =========== ///

& {
    #platui > #mixins;
    #platui > #Modal;

    .plat-modal {
        .fill();
        .box-sizing(border-box);
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        z-index: @global-max-z-index;
        background-color: @backdrop-color;

        .plat-modal-container {
            .fill();
            .scroll();
            .box-sizing(border-box);
            .backface-visibility(hidden);
            .perspective(none);
            position: absolute;
            background-color: @background-color;
            color: @color;

            &.plat-no-transition,
            &.plat-modal-transition.plat-fade {
                top: 0;
                left: 0;
            }

            &.plat-modal-transition {
                .translateZ(0);

                &.plat-right {
                    .transition(@right-transition);
                    top: 0;
                    left: -100%;

                    &.plat-activate {
                        left: 0;
                    }
                }

                &.plat-left {
                    .transition(@left-transition);
                    top: 0;
                    right: -100%;

                    &.plat-activate {
                        right: 0;
                    }
                }

                &.plat-down {
                    .transition(@down-transition);
                    top: -100%;
                    left: 0;

                    &.plat-activate {
                        top: 0;
                    }
                }

                &.plat-up {
                    .transition(@up-transition);
                    bottom: -100%;
                    left: 0;

                    &.plat-activate {
                        bottom: 0;
                    }
                }

                &.plat-fade {
                    .transition(@fade-transition);
                    opacity: 0;

                    &.plat-activate {
                        opacity: 1;
                    }
                }
            }
        }

        &.modal-custom-width {
            #platui > #Modal > #custom-width;

            .plat-modal-container {
                width: @width;
                height: 100%;

                &.plat-no-transition,
                &.plat-modal-transition.plat-fade {
                    top: 0;
                    left: @x-offset;
                }

                &.plat-modal-transition {
                    &.plat-right {
                        top: 0;
                        left: -50%;

                        &.plat-activate {
                            left: @x-offset;
                        }
                    }

                    &.plat-left {
                        top: 0;
                        right: -50%;

                        &.plat-activate {
                            right: @x-offset;
                        }
                    }

                    &.plat-down {
                        top: -100%;
                        left: @x-offset;

                        &.plat-activate {
                            top: 0;
                        }
                    }

                    &.plat-up {
                        bottom: -100%;
                        left: @x-offset;

                        &.plat-activate {
                            bottom: 0;
                        }
                    }
                }
            }

            &.modal-centered {
                .plat-modal-container {
                    &.plat-no-transition,
                    &.plat-modal-transition.plat-fade,
                    &.plat-modal-transition.plat-down,
                    &.plat-modal-transition.plat-up {
                        .translate-accelerate(-50%;0);
                        left: 50%;
                    }

                    &.plat-modal-transition {
                        &.plat-right {
                            .translate-accelerate(-50%;0);

                            &.plat-activate {
                                left: 50%;
                            }
                        }

                        &.plat-left {
                            .translate-accelerate(50%;0);

                            &.plat-activate {
                                right: 50%;
                            }
                        }
                    }
                }
            }
        }

        &.modal-custom-height {
            #platui > #Modal > #custom-height;

            .plat-modal-container {
                width: 100%;
                height: @height;

                &.plat-no-transition,
                &.plat-modal-transition.plat-fade {
                    top: @y-offset;
                    left: 0;
                }

                &.plat-modal-transition {
                    &.plat-right {
                        top: @y-offset;
                        left: -100%;

                        &.plat-activate {
                            left: 0;
                        }
                    }

                    &.plat-left {
                        top: @y-offset;
                        right: -100%;

                        &.plat-activate {
                            right: 0;
                        }
                    }

                    &.plat-down {
                        top: -50%;
                        left: 0;

                        &.plat-activate {
                            top: @y-offset;
                        }
                    }

                    &.plat-up {
                        bottom: -50%;
                        left: 0;

                        &.plat-activate {
                            bottom: @y-offset;
                        }
                    }
                }
            }

            &.modal-centered {
                .plat-modal-container {
                    &.plat-no-transition,
                    &.plat-modal-transition.plat-fade,
                    &.plat-modal-transition.plat-right,
                    &.plat-modal-transition.plat-left {
                        .translate-accelerate(0;-50%);
                        top: 50%;
                    }

                    &.plat-modal-transition {
                        &.plat-down {
                            .translate-accelerate(0;-50%);

                            &.plat-activate {
                                top: 50%;
                            }
                        }

                        &.plat-up {
                            .translate-accelerate(0;50%);

                            &.plat-activate {
                                bottom: 50%;
                            }
                        }
                    }
                }
            }
        }

        &.modal-custom {
            #platui > #Modal > #custom;

            .plat-modal-container {
                width: @width;
                height: @height;

                &.plat-no-transition,
                &.plat-modal-transition.plat-fade {
                    top: @y-offset;
                    left: @x-offset;
                }

                &.plat-modal-transition {
                    .plat-right {
                        top: @y-offset;
                        left: -@x-offset;

                        &.plat-activate {
                            left: @x-offset;
                        }
                    }

                    &.plat-left {
                        top: @y-offset;
                        right: -@width;

                        &.plat-activate {
                            right: @x-offset;
                        }
                    }

                    &.plat-down {
                        top: -@height;
                        left: @x-offset;

                        &.plat-activate {
                            top: @y-offset;
                        }
                    }

                    &.plat-up {
                        bottom: -@height;
                        left: @x-offset;

                        &.plat-activate {
                            bottom: @y-offset;
                        }
                    }
                }
            }

            &.modal-centered {
                .plat-modal-container {
                    &.plat-no-transition,
                    &.plat-modal-transition.plat-fade {
                        .translate-accelerate(-50%;-50%);
                        top: 50%;
                        left: 50%;
                    }

                    &.plat-modal-transition {
                        &.plat-right {
                            .translate-accelerate(-50%;-50%);
                            top: 50%;

                            &.plat-activate {
                                left: 50%;
                            }
                        }

                        &.plat-left {
                            .translate-accelerate(50%;-50%);
                            top: 50%;

                            &.plat-activate {
                                right: 50%;
                            }
                        }

                        &.plat-down {
                            .translate-accelerate(-50%;-50%);
                            left: 50%;

                            &.plat-activate {
                                top: 50%;
                            }
                        }

                        &.plat-up {
                            .translate-accelerate(-50%;50%);
                            left: 50%;

                            &.plat-activate {
                                bottom: 50%;
                            }
                        }
                    }
                }
            }
        }
    }
}

/// =========== Navbar Declaration =========== ///

& {
    #platui > #mixins;
    #platui > #Navbar;

    .plat-navbar {
        .box-sizing(border-box);
        position: absolute;
        left: 0;
        height: @height;
        width: 100%;
        background-color: @background-color;
        color: @color;
        padding: @padding;
        border-top: @border-top;
        border-right: @border-right;
        border-bottom: @border-bottom;
        border-left: @border-left;
        z-index: @z-index;

        &:not(.navbar-no-shadow) {
            .box-shadow(@box-shadow);
        }

        &.plat-navbar-top {
            top: 0;
        }

        &.plat-navbar-bottom {
            bottom: 0;
        }

        .plat-navbar-left,
        .plat-navbar-center,
        .plat-navbar-right {
            .box-sizing(border-box);
            height: 100%;
            float: left;
            font-size: @font-size;
        }

        .plat-navbar-items {
            .flexbox();
            .align-items(center);
            .box-sizing(border-box);
            height: 100%;
        }

        .plat-navbar-item {
            .inline-flexbox();
            .align-items(center);
            .box-sizing(border-box);
            height: 100%;
            padding: @item-padding;
        }

        .plat-navbar-left {
            width: @left-percentage;

            .plat-navbar-items {
                .justify-content(flex-start);
            }
        }

        .plat-navbar-center {
            width: @center-percentage;

            .plat-navbar-items {
                .justify-content(center);
            }
        }

        .plat-navbar-right {
            width: @right-percentage;

            .plat-navbar-items {
                .justify-content(flex-end);
            }
        }
    }
}

/// =========== Modal Prompt Declaration =========== ///

& {
    #platui > #variables;
    #platui > #mixins;
    #platui > #Modal;

    .modal-prompt {
        background-color: @prompt-backdrop-color;

        .plat-modal-container {
            .border-radius(@prompt-border-radius);
            width: @prompt-width;
            max-width: @prompt-max-width;
            height: auto;
            // need this here for strange painting issue with prompt title and border-radius
            background-color: @transparent;

            &.plat-no-transition,
            &.plat-modal-transition.plat-fade,
            &.plat-modal-transition.plat-right,
            &.plat-modal-transition.plat-left {
                top: @prompt-top;
            }

            &.plat-no-transition,
            &.plat-modal-transition.plat-fade,
            &.plat-modal-transition.plat-down,
            &.plat-modal-transition.plat-up {
                .translate-accelerate(-50%;0);
                left: 50%;
            }

            &.plat-modal-transition {
                &.plat-down {
                    &.plat-activate {
                        top: @prompt-top;
                    }
                }

                &.plat-up {
                    .transition(@prompt-up-transition);
                    top: 100%;
                    bottom: unset;

                    &.plat-activate {
                        top: @prompt-top;
                        bottom: unset;
                    }
                }

                &.plat-right {
                    .translate-accelerate(-50%;0);

                    &.plat-activate {
                        left: 50%;
                    }
                }

                &.plat-left {
                    .translate-accelerate(50%;0);

                    &.plat-activate {
                        right: 50%;
                    }
                }
            }

            .prompt-title {
                padding: 1em 2em;
                border-bottom: 1px solid @prompt-accent-color;
                text-align: center;
                font-size: 110%;
                color: @prompt-title-color;
                background-color: @prompt-title-background-color;
            }

            .prompt-body {
                padding: 1em 2em;
                text-align: center;
                background-color: @prompt-body-background-color;
            }

            .prompt-action {
                text-align: center;
                padding: 1em 2em;
                background-color: @prompt-action-background-color;

                &.button-group {
                    .flexbox();
                    padding: 0;
                    width: 100%;

                    & > button {
                        .flex(1);
                        height: 100%;
                        padding-top: 1em;
                        padding-bottom: 1em;
                        font-size: 110%;
                        border: none;
                        border-top: 2px solid @prompt-accent-color;
                        background-color: @transparent;
                        color: lighten(@color, 20%);

                        &:not(:first-child) {
                            border-left: 2px solid @prompt-accent-color;
                        }

                        &:active {
                            background-color: darken(@prompt-action-background-color, 10%);
                        }

                        &.button-suggested {
                            color: @color;
                        }
                    }
                }
            }
        }
    }
}

/// =========== Progress Bar Declaration =========== ///

& {
    #platui > #mixins;
    #platui > #ProgressBar;

    .plat-progress {
        .box-sizing(border-box);
        width: 100%;

        .plat-progress-container {
            .border-radius(@border-radius);
            .box-sizing(content-box);
            .box-shadow(inset 0px 1px 1px 0px rgba(0,0,0,0.13));
            position: relative;
            height: @height;
            width: 100%;
            background-color: @empty-color;
            overflow: hidden;
            border: @border;

            .plat-animated-bar {
                .border-radius(@fill-radius);
                .box-sizing(content-box);
                .translateZ(0);
                background-color: @fill-color;
                width: 0;
                height: 100%;

                &.plat-transition-init {
                    .transition(width @transition-time @transition-function);
                }
            }
        }

        &.progress-primary {
            .plat-animated-bar {
                background-color: @primary-color;
            }
        }

        &.progress-secondary {
            .plat-animated-bar {
                background-color: @secondary-color;
            }
        }

        &.progress-success {
            .plat-animated-bar {
                background-color: @success-color;
            }
        }

        &.progress-danger {
            .plat-animated-bar {
                background-color: @danger-color;
            }
        }

        &.progress-caution {
            .plat-animated-bar {
                background-color: @caution-color;
            }
        }
    }
}

/// ============= Progress Ring Constants ============= ///

#platui {
    #__ProgressRing {
        #platui > #ProgressRing;
        @fill-color: fade(@color, 80%);
        @unfilled-color-0: fade(@color, 10%);
        @unfilled-color-1: fade(@color, 15%);
        @thickness: @diameter / 10;
        @delay-step: @spin-frequency / 12;
    }
}

/// =========== Progress Ring Declarations =========== ///

& {
    #platui > #mixins;
    #platui > #__ProgressRing;

    .plat-ring {
        .box-sizing(border-box);
        display: inline-block;
        position: relative;
        width: @diameter;
        height: @diameter;

        .plat-animated-ring {
            .box-sizing(border-box);
            .translateZ(0);
        }

        &.plat-ring-0 {
            .plat-animated-ring {
                .border-radius(50%);
                .animate(@spin-animation-name; @spin-frequency; linear; 0s; infinite);
                width: 100%;
                height: 100%;
                border-left: @thickness solid @fill-color;
                border-top: @thickness solid @unfilled-color-0;
                border-right: @thickness solid @unfilled-color-0;
                border-bottom: @thickness solid @unfilled-color-0;
            }
        }

        &.plat-ring-1 {
            .plat-animated-ring {
                .animate(@spin-animation-name; @spin-frequency; steps(8); 0s; infinite);
                width: 100%;
                height: 100%;
                position: relative;
	            overflow: hidden;

                .plat-animated-child::before,
                .plat-animated-child::after {
                    .border-radius(40%);
                    .transform-origin(50% (500% / 3));
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 45%;
                    width: 10%;
                    height: 30%;
                }

                .plat-animated-child-0::before {
                    background-color: fade(@color, 75%);
                }

                .plat-animated-child-0::after {
                    .rotate(-45deg);
                    background-color: fade(@color, 60%);
                }

                .plat-animated-child-1::before {
                    .rotate(-90deg);
                    background-color: fade(@color, 45%);
                }

                .plat-animated-child-1::after {
                    .rotate(-135deg);
                    background-color: fade(@color, 30%);
                }

                .plat-animated-child-2::before {
                    .rotate(45deg);
                    background-color: @unfilled-color-1;
                }

                .plat-animated-child-2::after {
                    .rotate(90deg);
                    background-color: @unfilled-color-1;
                }

                .plat-animated-child-3::before {
                    .rotate(135deg);
                    background-color: @unfilled-color-1;
                }

                .plat-animated-child-3::after {
                    .rotate(180deg);
                    background-color: @unfilled-color-1;
                }
            }
        }

        &.plat-ring-2 {
            .plat-animated-ring {
                width: 100%;
                height: 100%;
                position: relative;
	            overflow: hidden;

                .plat-animated-child {
                    .fill();
                    position: absolute;
                    top: 0;
                    left: 0;

                    &::before {
                        .border-radius(50%);
                        .animate(@fade-delay-animation-name; @spin-frequency; ease-in-out; 0s; infinite; normal; both);
                        content: "";
                        display: block;
                        margin: 0 auto;
                        width: 13%;
                        height: 13%;
                        background-color: @fill-color;
                    }
                }

                .plat-animated-child-1 {
                    .rotate(30deg);

                    &::before {
                        .animation-delay(-@spin-frequency + @delay-step);
                    }
                }

                .plat-animated-child-2 {
                    .rotate(60deg);

                    &::before {
                        .animation-delay(-@spin-frequency + (@delay-step * 2));
                    }
                }

                .plat-animated-child-3 {
                    .rotate(90deg);

                    &::before {
                        .animation-delay(-@spin-frequency + (@delay-step * 3));
                    }
                }

                .plat-animated-child-4 {
                    .rotate(120deg);

                    &::before {
                        .animation-delay(-@spin-frequency + (@delay-step * 4));
                    }
                }

                .plat-animated-child-5 {
                    .rotate(150deg);

                    &::before {
                        .animation-delay(-@spin-frequency + (@delay-step * 5));
                    }
                }

                .plat-animated-child-6 {
                    .rotate(180deg);

                    &::before {
                        .animation-delay(-@spin-frequency + (@delay-step * 6));
                    }
                }

                .plat-animated-child-7 {
                    .rotate(-150deg);

                    &::before {
                        .animation-delay(-@spin-frequency + (@delay-step * 7));
                    }
                }

                .plat-animated-child-8 {
                    .rotate(-120deg);

                    &::before {
                        .animation-delay(-@spin-frequency + (@delay-step * 8));
                    }
                }

                .plat-animated-child-9 {
                    .rotate(-90deg);

                    &::before {
                        .animation-delay(-@spin-frequency + (@delay-step * 9));
                    }
                }

                .plat-animated-child-10 {
                    .rotate(-60deg);

                    &::before {
                        .animation-delay(-@spin-frequency + (@delay-step * 10));
                    }
                }

                .plat-animated-child-11 {
                    .rotate(-30deg);

                    &::before {
                        .animation-delay(-@spin-frequency + (@delay-step * 11));
                    }
                }
            }
        }
    }

    .spin(@spin-animation-name);
    .fade-delay(@fade-delay-animation-name);
}

/// =========== Radio Declaration =========== ///

& {
    #platui > #mixins;
    #platui > #Radio;

    .plat-radio {
        .flex-vertical-center(true);
        .box-sizing(border-box);
        cursor: pointer;

        & > span {
            line-height: 1.2;

            &:first-of-type {
                padding-left: 0.4em;
            }
        }

        .plat-radio-container {
            .flex(0 0 @diameter);
            .border-radius(50%);
            .background-clip(padding-box);
            .box-sizing(border-box);
            position: relative;
            display: inline-block;
            width: @diameter;
            max-width: @diameter;
            height: @diameter;
            max-height: @diameter;
            background-color: @background-color;
            border: @border-width solid @border-color;

            &.plat-bullet {
                border-color: @active-border-color;

                .plat-mark {
                    .border-radius(50%);
                    .background-clip(padding-box);
                    .box-sizing(border-box);
                    background-color: @mark-color;
                    width: 100%;
                    height: 100%;
                    border: @mark-padding solid @active-background-color;
                }
            }
        }
    }
}

/// ============= Range Constants ============= ///

#platui {
    #__Range {
        #platui > #Range;
        @knob-radius: @knob-diameter / 2;
        @half-thickness: @thickness / 2;
    }
}

/// ============= Range Declaration ============= ///

& {
    #platui > #mixins;
    #platui > #__Range;

    .plat-range {
        .user-select(none);
        .box-sizing(border-box);
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0;

        .plat-range-container {
            .fill();
            .border-radius(@border-radius);
            .box-sizing(border-box);
            position: relative;
            overflow: visible;

            .plat-range-track {
                .box-shadow(inset 0px 1px 1px 0px darken(@fill-color, 10%));
                .border-radius(@border-radius);
                .box-sizing(border-box);
                position: absolute;
                background-color: @fill-color;
                overflow: visible;

                .plat-lower-knob,
                .plat-upper-knob {
                    .box-sizing(border-box);
                    .border-radius(50%);
                    .box-shadow(0px 1px 2px 0px rgba(50, 50, 50, 0.15));
                    position: absolute;
                    width: @knob-diameter;
                    height: @knob-diameter;
                    background-color: @knob-color;
                    border: @knob-border-width solid @knob-border-color;
                    cursor: pointer;
                    z-index: 0;

                    &.plat-top {
                        z-index: 1;
                    }
                }
            }
        }

        &:not(.range-outline) {
            .plat-range-container {
                .box-shadow(inset 0px 1px 1px 0px darken(@empty-color, 10%));
                background-color: @empty-color;
            }
        }

        &.range-outline {
            .plat-range-container {
                border: @outline-border-width solid @outline-border-color;
            }
        }

        &.plat-horizontal,
        &.plat-horizontal-reversed {
            .touch-action(pan-y);
            height: @knob-diameter;
            padding: 0 @knob-radius;

            .plat-range-container {
                .translate-accelerate(0;-@half-thickness);
                top: 50%;
                height: @thickness;

                .plat-range-track {
                    width: 100%;
                    height: 100%;

                    .plat-lower-knob,
                    .plat-upper-knob {
                        .translate-accelerate(0;-@knob-radius);
                        top: @half-thickness;
                    }

                    .plat-lower-knob {
                        left: -@knob-radius;
                    }

                    .plat-upper-knob {
                        right: -@knob-radius;
                    }
                }
            }
        }

        &.plat-horizontal {
            .plat-range-container {
                .plat-range-track {
                    left: 0;

                    &.plat-transition-init {
                        .translateZ(0);
                        .transition(~'width @{transition-time}, left @{transition-time}');
                    }
                }
            }
        }

        &.plat-horizontal-reversed {
            .plat-range-container {
                .plat-range-track {
                    right: 0;

                    &.plat-transition-init {
                        .translateZ(0);
                        .transition(~'width @{transition-time}, right @{transition-time}');
                    }
                }
            }
        }

        &.plat-vertical,
        &.plat-vertical-reversed {
            .touch-action(pan-x);
            width: @knob-diameter;
            padding: @knob-radius 0;

            .plat-range-container {
                .translate-accelerate(-@half-thickness;0);
                left: 50%;
                top: @knob-radius;
                width: @thickness;

                .plat-range-track {
                    width: 100%;
                    height: 0;

                    .plat-lower-knob,
                    .plat-upper-knob {
                        .translate-accelerate(-@knob-radius;0);
                        left: @half-thickness;
                    }

                    .plat-lower-knob {
                        bottom: -@knob-radius;
                    }

                    .plat-upper-knob {
                        top: -@knob-radius;
                    }
                }
            }
        }

        &.plat-vertical {
            .plat-range-container {
                .plat-range-track {
                    bottom: 0;

                    &.plat-transition-init {
                        .translateZ(0);
                        .transition(~'height @{transition-time}, bottom @{transition-time}');
                    }
                }
            }
        }

        &.plat-vertical-reversed {
            .plat-range-container {
                .plat-range-track {
                    top: 0;

                    &.plat-transition-init {
                        .translateZ(0);
                        .transition(~'height @{transition-time}, top @{transition-time}');
                    }
                }
            }
        }

    /// =========== Slider Color Options =========== ///

        &.range-primary {
            .plat-range-container {
                .plat-range-track {
                    .box-shadow(inset 0px 1px 1px 0px darken(@primary-color, 10%));
                    background-color: @primary-color;
                }
            }
        }

        &.range-secondary {
            .plat-range-container {
                .plat-range-track {
                    .box-shadow(inset 0px 1px 1px 0px darken(@secondary-color, 10%));
                    background-color: @secondary-color;
                }
            }
        }

        &.range-success {
            .plat-range-container {
                .plat-range-track {
                    .box-shadow(inset 0px 1px 1px 0px darken(@success-color, 10%));
                    background-color: @success-color;
                }
            }
        }

        &.range-caution {
            .plat-range-container {
                .plat-range-track {
                    .box-shadow(inset 0px 1px 1px 0px darken(@caution-color, 10%));
                    background-color: @caution-color;
                }
            }
        }

        &.range-danger {
            .plat-range-container {
                .plat-range-track {
                    .box-shadow(inset 0px 1px 1px 0px darken(@danger-color, 10%));
                    background-color: @danger-color;
                }
            }
        }
    }
}

/// ============= Select Constants ============= ///

#platui {
    #__Select {
        #platui > #variables;
        @checked-option-hover-color: @white;
        @checked-option-hover-background-color: #1e90ff;
    }
}

/// =========== Select Declaration =========== ///

& {
    #platui > #mixins;
    #platui > #Select;
    #platui > #__Select;

    .plat-select {
        .box-sizing(border-box);
        .border-radius(@border-radius);
        .user-select(none);
        .appearance(none);
        display: inline-block;
        height: @height;
        color: @color;
        background-color: @background-color;
        outline: none;
        margin: 0;
        padding: 0 1.75em 0 0.5em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border: @border-width solid @border-color;
        background-position: 95% 50%;
        background-position: -webkit-calc(~'100% - 0.5em') 50%;
        background-position: calc(~'100% - 0.5em') 50%;
        background-repeat: no-repeat;
        background-size: 0.7em;
        background-image: url(@caret);

        &:focus {
            border-color: @border-color-focus;
        }

        &::-ms-expand {
            display: none;
        }

        &::-ms-value {
            color: @color;
            background-color: @background-color;
        }

        &.select-light {
            color: @color-light;
            background-image: url(@caret-light);
            border-color: @border-color-light;

            &:focus {
                border-color: @border-color-light-focus;
            }

            &::-ms-value {
                color: @color-light;
            }

            option {
                color: @color;
            }
        }

        option:checked {
            color: lighten(@checked-option-hover-color, 15%);
            background-color: lighten(@checked-option-hover-background-color, 15%);
        }

        option:focus,
        option:active,
        option:hover {
            color: @checked-option-hover-color;
            background-color: @checked-option-hover-background-color;
        }
    }
}

/// ============= Slider Constants ============= ///

#platui {
    #__Slider {
        #platui > #Slider;
        @knob-radius: @knob-diameter / 2;
        @half-thickness: @thickness / 2;
    }
}

/// ========== Slider Declaration =========== ///

& {
    #platui > #mixins;
    #platui > #__Slider;

    .plat-slider {
        .user-select(none);
        .box-sizing(border-box);
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0;

        .plat-slider-container {
            .fill();
            .border-radius(@border-radius);
            .box-sizing(border-box);
            position: relative;
            overflow: visible;

            .plat-slider-track {
                .box-shadow(inset 0px 1px 1px 0px darken(@fill-color, 10%));
                .border-radius(@border-radius);
                .box-sizing(border-box);
                position: absolute;
                background-color: @fill-color;
                overflow: visible;

                .plat-knob {
                    .box-sizing(border-box);
                    .border-radius(50%);
                    .box-shadow(0px 1px 2px 0px rgba(50, 50, 50, 0.15));
                    position: absolute;
                    width: @knob-diameter;
                    height: @knob-diameter;
                    background-color: @knob-color;
                    border: @knob-border-width solid @knob-border-color;
                    cursor: pointer;
                }
            }
        }

        &:not(.slider-outline) {
            .plat-slider-container {
                .box-shadow(inset 0px 1px 1px 0px darken(@empty-color, 10%));
                background-color: @empty-color;
            }
        }

        &.slider-outline {
            .plat-slider-container {
                border: @outline-border-width solid @outline-border-color;
            }
        }

    /// ============ Slider Orientations ============= ///

        &.plat-horizontal,
        &.plat-horizontal-reversed {
            .touch-action(pan-y);
            height: @knob-diameter;
            padding: 0 @knob-radius;

            .plat-slider-container {
                .translate-accelerate(0;-@half-thickness);
                top: 50%;
                height: @thickness;

                .plat-slider-track {
                    width: 0;
                    height: 100%;

                    .plat-knob {
                        .translate-accelerate(0;-@knob-radius);
                        top: @half-thickness;
                    }

                    &.plat-transition-init {
                        .translateZ(0);
                        .transition(width @transition-time);
                    }
                }
            }
        }

        &.plat-horizontal {
            .plat-slider-container {
                .plat-slider-track {
                    left: 0;

                    .plat-knob {
                        right: -@knob-radius;
                    }
                }
            }
        }

        &.plat-horizontal-reversed {
            .plat-slider-container {
                .plat-slider-track {
                    right: 0;

                    .plat-knob {
                        left: -@knob-radius;
                    }
                }
            }
        }

        &.plat-vertical,
        &.plat-vertical-reversed {
            .touch-action(pan-x);
            width: @knob-diameter;
            padding: @knob-radius 0;

            .plat-slider-container {
                .translate-accelerate(-@half-thickness;0);
                left: 50%;
                top: @knob-radius;
                width: @thickness;

                .plat-slider-track {
                    width: 100%;
                    height: 0;

                    .plat-knob {
                        .translate-accelerate(-@knob-radius;0);
                        left: @half-thickness;
                    }

                    &.plat-transition-init {
                        .translateZ(0);
                        .transition(height @transition-time);
                    }
                }
            }
        }

        &.plat-vertical {
            .plat-slider-container {
                .plat-slider-track {
                    bottom: 0;

                    .plat-knob {
                        top: -@knob-radius;
                    }
                }
            }
        }

        &.plat-vertical-reversed {
            .plat-slider-container {
                .plat-slider-track {
                    top: 0;

                    .plat-knob {
                        bottom: -@knob-radius;
                    }
                }
            }
        }

    /// =========== Slider Color Options =========== ///

        &.slider-primary {
            .plat-slider-container {
                .plat-slider-track {
                    .box-shadow(inset 0px 1px 1px 0px darken(@primary-color, 10%));
                    background-color: @primary-color;
                }
            }
        }

        &.slider-secondary {
            .plat-slider-container {
                .plat-slider-track {
                    .box-shadow(inset 0px 1px 1px 0px darken(@secondary-color, 10%));
                    background-color: @secondary-color;
                }
            }
        }

        &.slider-success {
            .plat-slider-container {
                .plat-slider-track {
                    .box-shadow(inset 0px 1px 1px 0px darken(@success-color, 10%));
                    background-color: @success-color;
                }
            }
        }

        &.slider-caution {
            .plat-slider-container {
                .plat-slider-track {
                    .box-shadow(inset 0px 1px 1px 0px darken(@caution-color, 10%));
                    background-color: @caution-color;
                }
            }
        }

        &.slider-danger {
            .plat-slider-container {
                .plat-slider-track {
                    .box-shadow(inset 0px 1px 1px 0px darken(@danger-color, 10%));
                    background-color: @danger-color;
                }
            }
        }
    }
}

/// ============= Toggle Constants ============= ///

#platui {
    #__Toggle {
        #platui > #Toggle;
        @width: @height * @width-ratio;
        @toggle-thin-height: @height * @toggle-thin-ratio;
        @half-thin-height: @toggle-thin-height / 2;
        @toggle-thin-knob-radius: @height / 2;
    }
}

/// ========== Toggle Declaration =========== ///

& {
    #platui > #mixins;
    #platui > #__Toggle;

    .plat-toggle {
        .flex-vertical-center(true);
        .box-sizing(border-box);
        cursor: pointer;

        & > span:first-of-type {
            padding-left: 0.4em;
        }

        .plat-toggle-container {
            .flex(0 0 @width);
            .border-radius(@height);
            .box-sizing(content-box);
            .translateZ(0);
            .transition(~'background-color @{transition-time}, border-color @{transition-time}');
            position: relative;
            display: inline-block;
            width: @width;
            height: @height;
            overflow: hidden;
            background-color: @background-color;
            border: 1px solid @border-color;

            .plat-knob {
                .border-radius(50%);
                .box-sizing(border-box);
                .translateZ(0);
                .transition(left @transition-time);
                position: absolute;
                top: 0;
                left: 0;
                height: @height;
                width: @height;
                background-color: @knob-color;
            }

            &.plat-slide {
                border-color: @active-border-color;
                background-color: @active-background-color;

                .plat-knob {
                    left: @width - @height;
                }
            }
        }

    /// ============== Toggle Square =============== ///

        &.toggle-square {
            .plat-toggle-container {
                .border-radius(2px);

                .plat-knob {
                    .border-radius(2px);
                }
            }
        }

    /// =============== Toggle Thin ================ ///

        &.toggle-thin {
            .plat-toggle-container {
                height: @toggle-thin-height;
                overflow: visible;
                background-color: @toggle-thin-background-color;
                border: none;

                .plat-knob {
                    .box-shadow(2px 1px 2px 0px rgba(50, 50, 50, 0.15));
                    top: @half-thin-height - @toggle-thin-knob-radius;
                    border: 1px solid darken(@knob-color, 15%);
                }

                &.plat-slide {
                    background-color: @active-background-color;

                    .plat-knob {
                        .box-shadow(-2px 1px 2px 0px rgba(50, 50, 50, 0.15));
                        left: (@width - @height) * 1.05;
                    }
                }
            }
        }

    /// =========== Toggle Color Options =========== ///

        &.toggle-primary {
            .plat-toggle-container.plat-slide {
                background-color: @primary-color;
                border-color: darken(@primary-color, 5%);
            }
        }

        &.toggle-secondary {
            .plat-toggle-container.plat-slide {
                background-color: @secondary-color;
                border-color: darken(@secondary-color, 5%);
            }
        }

        &.toggle-success {
            .plat-toggle-container.plat-slide {
                background-color: @success-color;
                border-color: darken(@success-color, 5%);
            }
        }

        &.toggle-danger {
            .plat-toggle-container.plat-slide {
                background-color: @danger-color;
                border-color: darken(@danger-color, 5%);
            }
        }

        &.toggle-caution {
            .plat-toggle-container.plat-slide {
                background-color: @caution-color;
                border-color: darken(@caution-color, 5%);
            }
        }
    }
}