/**
 * Size variants
 */

.select-wrapper {
    ////
    /// Variables for the sm size variant
    /// @name sm
    /// @type variant
    ////
    @include variant('sm', 'form') {
        ////
        /// The border top left radius of the select component, for the sm size variant
        /// @name border-top-left-radius
        ////
        ----border-top-left-radius: calc(#{var(--border-top-left-radius)} * #{size-multiplier('sm')});
        ////
        /// The border top right radius of the select component, for the sm size variant
        /// @name border-top-right-radius
        ////
        ----border-top-right-radius: calc(#{var(--border-top-right-radius)} * #{size-multiplier('sm')});
        ////
        /// The border bottom right radius of the select component, for the sm size variant
        /// @name border-bottom-right-radius
        ////
        ----border-bottom-right-radius: calc(#{var(--border-bottom-right-radius)} * #{size-multiplier('sm')});
        ////
        /// The border bottom left radius of the select component, for the sm size variant
        /// @name border-bottom-left-radius
        ////
        ----border-bottom-left-radius: calc(#{var(--border-bottom-left-radius)} * #{size-multiplier('sm')});
        ////
        /// The font size of the select component, for the sm size variant
        /// @name font-size
        ////
        ----font-size: calc(#{font-size()} * #{size-multiplier('sm')});
        ////
        /// The margin top of the select component, for the sm size variant
        /// @name margin-top
        ////
        ----margin-top: calc(#{calc(var(--margin-top) / 2)} * #{size-multiplier('sm')});
        ////
        /// The margin right of the select component, for the sm size variant
        /// @name margin-right
        ////
        ----margin-right: calc(#{calc(var(--margin-right) / 2)} * #{size-multiplier('sm')});
        ////
        /// The margin bottom of the select component, for the sm size variant
        /// @name margin-bottom
        ////
        ----margin-bottom: calc(#{calc(var(--margin-bottom) / 2)} * #{size-multiplier('sm')});
        ////
        /// The margin left of the select component, for the sm size variant
        /// @name margin-left
        ////
        ----margin-left: calc(#{calc(var(--margin-left) / 2)} * #{size-multiplier('sm')});
        ////
        /// The padding top of the select component, for the sm size variant
        /// @name padding-top
        ////
        ----padding-top: calc(#{var(--padding-top)} * #{size-multiplier('sm')});
        ////
        /// The padding right of the select component, for the sm size variant
        /// @name padding-right
        ////
        ----padding-right: calc(#{var(--padding-right)} * #{size-multiplier('sm')});
        ////
        /// The padding bottom of the select component, for the sm size variant
        /// @name padding-bottom
        ////
        ----padding-bottom: calc(#{var(--padding-bottom)} * #{size-multiplier('sm')});
        ////
        /// The padding left of the select component, for the sm size variant
        /// @name padding-left
        ////
        ----padding-left: calc(#{var(--padding-left)} * #{size-multiplier('sm')});
        ////
        /// The padding bottom of the select component option, for the sm size variant
        /// @name option--padding-bottom
        ////
        ----option--padding-bottom: calc(#{calc(var(----padding-bottom) / 2)} * #{size-multiplier('sm')});
        ////
        /// The padding left of the select component option, for the sm size variant
        /// @name option--padding-left
        ////
        ----option--padding-left: calc(#{var(----padding-left)} * #{size-multiplier('sm')});
        ////
        /// The padding bottom of the select component header, for the sm size variant
        /// @name header--padding-bottom
        ////
        ----header--padding-bottom: calc(#{calc(var(----padding-bottom) * 3 / 4)} * #{size-multiplier('sm')});
        ////
        /// The padding left of the select component header, for the sm size variant
        /// @name header--padding-left
        ////
        ----header--padding-left: calc(#{var(----padding-left)} * #{size-multiplier('sm')});
        ////
        /// The padding bottom of the select component body, for the sm size variant
        /// @name body--padding-bottom
        ////
        ----body--padding-bottom: calc(#{var(----padding-bottom)} * #{size-multiplier('sm')});
        ////
        /// The padding left of the select component body, for the sm size variant
        /// @name body--padding-left
        ////
        ----body--padding-left: calc(#{0} * #{size-multiplier('sm')});
        ////
        /// The padding bottom of the select component footer, for the sm size variant
        /// @name footer--padding-bottom
        ////
        ----footer--padding-bottom: calc(#{calc(var(----padding-bottom) * 3 / 4)} * #{size-multiplier('sm')});
        ////
        /// The padding left of the select component footer, for the sm size variant
        /// @name footer--padding-left
        ////
        ----footer--padding-left: calc(#{var(----padding-left)} * #{size-multiplier('sm')});
    }
    ////
    /// Variables for the md size variant
    /// @name md
    /// @type variant
    ////
    @include variant('md', 'form') {
        ////
        /// The border top left radius of the select component, for the md size variant
        /// @name border-top-left-radius
        ////
        ----border-top-left-radius: calc(#{var(--border-top-left-radius)} * #{size-multiplier('md')});
        ////
        /// The border top right radius of the select component, for the md size variant
        /// @name border-top-right-radius
        ////
        ----border-top-right-radius: calc(#{var(--border-top-right-radius)} * #{size-multiplier('md')});
        ////
        /// The border bottom right radius of the select component, for the md size variant
        /// @name border-bottom-right-radius
        ////
        ----border-bottom-right-radius: calc(#{var(--border-bottom-right-radius)} * #{size-multiplier('md')});
        ////
        /// The border bottom left radius of the select component, for the md size variant
        /// @name border-bottom-left-radius
        ////
        ----border-bottom-left-radius: calc(#{var(--border-bottom-left-radius)} * #{size-multiplier('md')});
        ////
        /// The font size of the select component, for the md size variant
        /// @name font-size
        ////
        ----font-size: calc(#{font-size()} * #{size-multiplier('md')});
        ////
        /// The margin top of the select component, for the md size variant
        /// @name margin-top
        ////
        ----margin-top: calc(#{calc(var(--margin-top) / 2)} * #{size-multiplier('md')});
        ////
        /// The margin right of the select component, for the md size variant
        /// @name margin-right
        ////
        ----margin-right: calc(#{calc(var(--margin-right) / 2)} * #{size-multiplier('md')});
        ////
        /// The margin bottom of the select component, for the md size variant
        /// @name margin-bottom
        ////
        ----margin-bottom: calc(#{calc(var(--margin-bottom) / 2)} * #{size-multiplier('md')});
        ////
        /// The margin left of the select component, for the md size variant
        /// @name margin-left
        ////
        ----margin-left: calc(#{calc(var(--margin-left) / 2)} * #{size-multiplier('md')});
        ////
        /// The padding top of the select component, for the md size variant
        /// @name padding-top
        ////
        ----padding-top: calc(#{var(--padding-top)} * #{size-multiplier('md')});
        ////
        /// The padding right of the select component, for the md size variant
        /// @name padding-right
        ////
        ----padding-right: calc(#{var(--padding-right)} * #{size-multiplier('md')});
        ////
        /// The padding bottom of the select component, for the md size variant
        /// @name padding-bottom
        ////
        ----padding-bottom: calc(#{var(--padding-bottom)} * #{size-multiplier('md')});
        ////
        /// The padding left of the select component, for the md size variant
        /// @name padding-left
        ////
        ----padding-left: calc(#{var(--padding-left)} * #{size-multiplier('md')});
        ////
        /// The padding bottom of the select component option, for the md size variant
        /// @name option--padding-bottom
        ////
        ----option--padding-bottom: calc(#{calc(var(----padding-bottom) / 2)} * #{size-multiplier('md')});
        ////
        /// The padding left of the select component option, for the md size variant
        /// @name option--padding-left
        ////
        ----option--padding-left: calc(#{var(----padding-left)} * #{size-multiplier('md')});
        ////
        /// The padding bottom of the select component header, for the md size variant
        /// @name header--padding-bottom
        ////
        ----header--padding-bottom: calc(#{calc(var(----padding-bottom) * 3 / 4)} * #{size-multiplier('md')});
        ////
        /// The padding left of the select component header, for the md size variant
        /// @name header--padding-left
        ////
        ----header--padding-left: calc(#{var(----padding-left)} * #{size-multiplier('md')});
        ////
        /// The padding bottom of the select component body, for the md size variant
        /// @name body--padding-bottom
        ////
        ----body--padding-bottom: calc(#{var(----padding-bottom)} * #{size-multiplier('md')});
        ////
        /// The padding left of the select component body, for the md size variant
        /// @name body--padding-left
        ////
        ----body--padding-left: calc(#{0} * #{size-multiplier('md')});
        ////
        /// The padding bottom of the select component footer, for the md size variant
        /// @name footer--padding-bottom
        ////
        ----footer--padding-bottom: calc(#{calc(var(----padding-bottom) * 3 / 4)} * #{size-multiplier('md')});
        ////
        /// The padding left of the select component footer, for the md size variant
        /// @name footer--padding-left
        ////
        ----footer--padding-left: calc(#{var(----padding-left)} * #{size-multiplier('md')});
    }
    ////
    /// Variables for the lg size variant
    /// @name lg
    /// @type variant
    ////
    @include variant('lg', 'form') {
        ////
        /// The border top left radius of the select component, for the lg size variant
        /// @name border-top-left-radius
        ////
        ----border-top-left-radius: calc(#{var(--border-top-left-radius)} * #{size-multiplier('lg')});
        ////
        /// The border top right radius of the select component, for the lg size variant
        /// @name border-top-right-radius
        ////
        ----border-top-right-radius: calc(#{var(--border-top-right-radius)} * #{size-multiplier('lg')});
        ////
        /// The border bottom right radius of the select component, for the lg size variant
        /// @name border-bottom-right-radius
        ////
        ----border-bottom-right-radius: calc(#{var(--border-bottom-right-radius)} * #{size-multiplier('lg')});
        ////
        /// The border bottom left radius of the select component, for the lg size variant
        /// @name border-bottom-left-radius
        ////
        ----border-bottom-left-radius: calc(#{var(--border-bottom-left-radius)} * #{size-multiplier('lg')});
        ////
        /// The font size of the select component, for the lg size variant
        /// @name font-size
        ////
        ----font-size: calc(#{font-size()} * #{size-multiplier('lg')});
        ////
        /// The margin top of the select component, for the lg size variant
        /// @name margin-top
        ////
        ----margin-top: calc(#{calc(var(--margin-top) / 2)} * #{size-multiplier('lg')});
        ////
        /// The margin right of the select component, for the lg size variant
        /// @name margin-right
        ////
        ----margin-right: calc(#{calc(var(--margin-right) / 2)} * #{size-multiplier('lg')});
        ////
        /// The margin bottom of the select component, for the lg size variant
        /// @name margin-bottom
        ////
        ----margin-bottom: calc(#{calc(var(--margin-bottom) / 2)} * #{size-multiplier('lg')});
        ////
        /// The margin left of the select component, for the lg size variant
        /// @name margin-left
        ////
        ----margin-left: calc(#{calc(var(--margin-left) / 2)} * #{size-multiplier('lg')});
        ////
        /// The padding top of the select component, for the lg size variant
        /// @name padding-top
        ////
        ----padding-top: calc(#{var(--padding-top)} * #{size-multiplier('lg')});
        ////
        /// The padding right of the select component, for the lg size variant
        /// @name padding-right
        ////
        ----padding-right: calc(#{var(--padding-right)} * #{size-multiplier('lg')});
        ////
        /// The padding bottom of the select component, for the lg size variant
        /// @name padding-bottom
        ////
        ----padding-bottom: calc(#{var(--padding-bottom)} * #{size-multiplier('lg')});
        ////
        /// The padding left of the select component, for the lg size variant
        /// @name padding-left
        ////
        ----padding-left: calc(#{var(--padding-left)} * #{size-multiplier('lg')});
        ////
        /// The padding bottom of the select component option, for the lg size variant
        /// @name option--padding-bottom
        ////
        ----option--padding-bottom: calc(#{calc(var(----padding-bottom) / 2)} * #{size-multiplier('lg')});
        ////
        /// The padding left of the select component option, for the lg size variant
        /// @name option--padding-left
        ////
        ----option--padding-left: calc(#{var(----padding-left)} * #{size-multiplier('lg')});
        ////
        /// The padding bottom of the select component header, for the lg size variant
        /// @name header--padding-bottom
        ////
        ----header--padding-bottom: calc(#{calc(var(----padding-bottom) * 3 / 4)} * #{size-multiplier('lg')});
        ////
        /// The padding left of the select component header, for the lg size variant
        /// @name header--padding-left
        ////
        ----header--padding-left: calc(#{var(----padding-left)} * #{size-multiplier('lg')});
        ////
        /// The padding bottom of the select component body, for the lg size variant
        /// @name body--padding-bottom
        ////
        ----body--padding-bottom: calc(#{var(----padding-bottom)} * #{size-multiplier('lg')});
        ////
        /// The padding left of the select component body, for the lg size variant
        /// @name body--padding-left
        ////
        ----body--padding-left: calc(#{0} * #{size-multiplier('lg')});
        ////
        /// The padding bottom of the select component footer, for the lg size variant
        /// @name footer--padding-bottom
        ////
        ----footer--padding-bottom: calc(#{calc(var(----padding-bottom) * 3 / 4)} * #{size-multiplier('lg')});
        ////
        /// The padding left of the select component footer, for the lg size variant
        /// @name footer--padding-left
        ////
        ----footer--padding-left: calc(#{var(----padding-left)} * #{size-multiplier('lg')});
    }
}