/**
 * Size variants
 */

.breadcrumb {
    ////
    /// Variables for the sm size variant
    /// @name sm
    /// @type variant
    ////
    @include variant('sm') {
        ////
        /// The font size of the breadcrumb component, for the sm size variant
        /// @name font-size
        ////
        ----font-size: calc(#{font-size()} * #{size-multiplier('sm')});
        ////
        /// The padding right of the breadcrumb component, for the sm size variant
        /// @name padding-right
        ////
        ----padding-right: calc(#{var(--padding-right)} * #{size-multiplier('sm')});
        ////
        /// The padding left of the breadcrumb component, for the sm size variant
        /// @name padding-left
        ////
        ----padding-left: calc(#{var(--padding-left)} * #{size-multiplier('sm')});
    }
    ////
    /// Variables for the md size variant
    /// @name md
    /// @type variant
    ////
    @include variant('md') {
        ////
        /// The font size of the breadcrumb component, for the md size variant
        /// @name font-size
        ////
        ----font-size: calc(#{font-size()} * #{size-multiplier('md')});
        ////
        /// The padding right of the breadcrumb component, for the md size variant
        /// @name padding-right
        ////
        ----padding-right: calc(#{var(--padding-right)} * #{size-multiplier('md')});
        ////
        /// The padding left of the breadcrumb component, for the md size variant
        /// @name padding-left
        ////
        ----padding-left: calc(#{var(--padding-left)} * #{size-multiplier('md')});
    }
    ////
    /// Variables for the lg size variant
    /// @name lg
    /// @type variant
    ////
    @include variant('lg') {
        ////
        /// The font size of the breadcrumb component, for the lg size variant
        /// @name font-size
        ////
        ----font-size: calc(#{font-size()} * #{size-multiplier('lg')});
        ////
        /// The padding right of the breadcrumb component, for the lg size variant
        /// @name padding-right
        ////
        ----padding-right: calc(#{var(--padding-right)} * #{size-multiplier('lg')});
        ////
        /// The padding left of the breadcrumb component, for the lg size variant
        /// @name padding-left
        ////
        ----padding-left: calc(#{var(--padding-left)} * #{size-multiplier('lg')});
    }
}