/**
 * Size variants
 */

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