/**
 * Size variants
 */

.badge {
    ////
    /// Variables for the sm size variant
    /// @name sm
    /// @type variant
    ////
    @include variant('sm') {
        ////
        /// The border top left radius of the badge 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 badge 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 badge 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 badge 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 badge component, for the sm size variant
        /// @name font-size
        ////
        ----font-size: calc(#{65%} * #{size-multiplier('sm')});
        ////
        /// The padding top of the badge component, for the sm size variant
        /// @name padding-top
        ////
        ----padding-top: calc(#{calc(var(--padding-top) / 2)} * #{size-multiplier('sm')});
        ////
        /// The padding right of the badge component, for the sm size variant
        /// @name padding-right
        ////
        ----padding-right: calc(#{calc(var(--padding-right) / 2)} * #{size-multiplier('sm')});
        ////
        /// The padding bottom of the badge component, for the sm size variant
        /// @name padding-bottom
        ////
        ----padding-bottom: calc(#{calc(var(--padding-bottom) / 2)} * #{size-multiplier('sm')});
        ////
        /// The padding left of the badge component, for the sm size variant
        /// @name padding-left
        ////
        ----padding-left: calc(#{calc(var(--padding-left) / 2)} * #{size-multiplier('sm')});
    }
    ////
    /// Variables for the md size variant
    /// @name md
    /// @type variant
    ////
    @include variant('md') {
        ////
        /// The border top left radius of the badge 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 badge 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 badge 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 badge 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 badge component, for the md size variant
        /// @name font-size
        ////
        ----font-size: calc(#{75%} * #{size-multiplier('md')});
        ////
        /// The padding top of the badge component, for the md size variant
        /// @name padding-top
        ////
        ----padding-top: calc(#{calc(var(--padding-top) / 2)} * #{size-multiplier('md')});
        ////
        /// The padding right of the badge component, for the md size variant
        /// @name padding-right
        ////
        ----padding-right: calc(#{calc(var(--padding-right) / 2)} * #{size-multiplier('md')});
        ////
        /// The padding bottom of the badge component, for the md size variant
        /// @name padding-bottom
        ////
        ----padding-bottom: calc(#{calc(var(--padding-bottom) / 2)} * #{size-multiplier('md')});
        ////
        /// The padding left of the badge component, for the md size variant
        /// @name padding-left
        ////
        ----padding-left: calc(#{calc(var(--padding-left) / 2)} * #{size-multiplier('md')});
    }
    ////
    /// Variables for the lg size variant
    /// @name lg
    /// @type variant
    ////
    @include variant('lg') {
        ////
        /// The border top left radius of the badge 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 badge 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 badge 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 badge 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 badge component, for the lg size variant
        /// @name font-size
        ////
        ----font-size: calc(#{85%} * #{size-multiplier('lg')});
        ////
        /// The padding top of the badge component, for the lg size variant
        /// @name padding-top
        ////
        ----padding-top: calc(#{calc(var(--padding-top) / 2)} * #{size-multiplier('lg')});
        ////
        /// The padding right of the badge component, for the lg size variant
        /// @name padding-right
        ////
        ----padding-right: calc(#{calc(var(--padding-right) / 2)} * #{size-multiplier('lg')});
        ////
        /// The padding bottom of the badge component, for the lg size variant
        /// @name padding-bottom
        ////
        ----padding-bottom: calc(#{calc(var(--padding-bottom) / 2)} * #{size-multiplier('lg')});
        ////
        /// The padding left of the badge component, for the lg size variant
        /// @name padding-left
        ////
        ----padding-left: calc(#{calc(var(--padding-left) / 2)} * #{size-multiplier('lg')});
    }
}