/**
 * Color variants
 */

.modal-wrapper {
    ////
    /// Variables for the primary color variant
    /// @name primary
    /// @type variant
    ////
    @include variant('primary') {
        ////
        /// The background of the modal component, for the primary color variant
        /// @name background
        ////
        ----background: #{color('primary')};
        ////
        /// The border top color of the modal component, for the primary color variant
        /// @name border-top-color
        ////
        ----border-top-color: #{color('primary-60')};
        ////
        /// The border right color of the modal component, for the primary color variant
        /// @name border-right-color
        ////
        ----border-right-color: #{color('primary-60')};
        ////
        /// The border bottom color of the modal component, for the primary color variant
        /// @name border-bottom-color
        ////
        ----border-bottom-color: #{color('primary-60')};
        ////
        /// The border left color of the modal component, for the primary color variant
        /// @name border-left-color
        ////
        ----border-left-color: #{color('primary-60')};
        ////
        /// The color of the modal component, for the primary color variant
        /// @name color
        ////
        ----color: #{contrast-color($color-primary)};
        ////
        /// The background of the modal component header, for the primary color variant
        /// @name header--background
        ////
        ----header--background: #{color('primary-55')};
        ////
        /// The background of the modal component footer, for the primary color variant
        /// @name footer--background
        ////
        ----footer--background: #{color('primary-55')};
    }
    ////
    /// Variables for the secondary color variant
    /// @name secondary
    /// @type variant
    ////
    @include variant('secondary') {
        ////
        /// The background of the modal component, for the secondary color variant
        /// @name background
        ////
        ----background: #{color('secondary')};
        ////
        /// The border top color of the modal component, for the secondary color variant
        /// @name border-top-color
        ////
        ----border-top-color: #{color('secondary-60')};
        ////
        /// The border right color of the modal component, for the secondary color variant
        /// @name border-right-color
        ////
        ----border-right-color: #{color('secondary-60')};
        ////
        /// The border bottom color of the modal component, for the secondary color variant
        /// @name border-bottom-color
        ////
        ----border-bottom-color: #{color('secondary-60')};
        ////
        /// The border left color of the modal component, for the secondary color variant
        /// @name border-left-color
        ////
        ----border-left-color: #{color('secondary-60')};
        ////
        /// The color of the modal component, for the secondary color variant
        /// @name color
        ////
        ----color: #{contrast-color($color-secondary)};
        ////
        /// The background of the modal component header, for the secondary color variant
        /// @name header--background
        ////
        ----header--background: #{color('secondary-55')};
        ////
        /// The background of the modal component footer, for the secondary color variant
        /// @name footer--background
        ////
        ----footer--background: #{color('secondary-55')};
    }
    ////
    /// Variables for the light color variant
    /// @name light
    /// @type variant
    ////
    @include variant('light') {
        ////
        /// The background of the modal component, for the light color variant
        /// @name background
        ////
        ----background: #{color('white')};
        ////
        /// The border top color of the modal component, for the light color variant
        /// @name border-top-color
        ////
        ----border-top-color: #{color('light')};
        ////
        /// The border right color of the modal component, for the light color variant
        /// @name border-right-color
        ////
        ----border-right-color: #{color('light')};
        ////
        /// The border bottom color of the modal component, for the light color variant
        /// @name border-bottom-color
        ////
        ----border-bottom-color: #{color('light')};
        ////
        /// The border left color of the modal component, for the light color variant
        /// @name border-left-color
        ////
        ----border-left-color: #{color('light')};
        ////
        /// The color of the modal component, for the light color variant
        /// @name color
        ////
        ----color: #{contrast-color($color-light)};
        ////
        /// The background of the modal component header, for the light color variant
        /// @name header--background
        ////
        ----header--background: #{color('light-25')};
        ////
        /// The background of the modal component footer, for the light color variant
        /// @name footer--background
        ////
        ----footer--background: #{color('light-25')};
    }
    ////
    /// Variables for the dark color variant
    /// @name dark
    /// @type variant
    ////
    @include variant('dark') {
        ////
        /// The background of the modal component, for the dark color variant
        /// @name background
        ////
        ----background: #{color('dark')};
        ////
        /// The border top color of the modal component, for the dark color variant
        /// @name border-top-color
        ////
        ----border-top-color: #{color('dark-60')};
        ////
        /// The border right color of the modal component, for the dark color variant
        /// @name border-right-color
        ////
        ----border-right-color: #{color('dark-60')};
        ////
        /// The border bottom color of the modal component, for the dark color variant
        /// @name border-bottom-color
        ////
        ----border-bottom-color: #{color('dark-60')};
        ////
        /// The border left color of the modal component, for the dark color variant
        /// @name border-left-color
        ////
        ----border-left-color: #{color('dark-60')};
        ////
        /// The color of the modal component, for the dark color variant
        /// @name color
        ////
        ----color: #{contrast-color($color-dark)};
        ////
        /// The background of the modal component header, for the dark color variant
        /// @name header--background
        ////
        ----header--background: #{color('dark-55')};
        ////
        /// The background of the modal component footer, for the dark color variant
        /// @name footer--background
        ////
        ----footer--background: #{color('dark-55')};
    }
    ////
    /// Variables for the info color variant
    /// @name info
    /// @type variant
    ////
    @include variant('info') {
        ////
        /// The background of the modal component, for the info color variant
        /// @name background
        ////
        ----background: #{color('info')};
        ////
        /// The border top color of the modal component, for the info color variant
        /// @name border-top-color
        ////
        ----border-top-color: #{color('info-60')};
        ////
        /// The border right color of the modal component, for the info color variant
        /// @name border-right-color
        ////
        ----border-right-color: #{color('info-60')};
        ////
        /// The border bottom color of the modal component, for the info color variant
        /// @name border-bottom-color
        ////
        ----border-bottom-color: #{color('info-60')};
        ////
        /// The border left color of the modal component, for the info color variant
        /// @name border-left-color
        ////
        ----border-left-color: #{color('info-60')};
        ////
        /// The color of the modal component, for the info color variant
        /// @name color
        ////
        ----color: #{contrast-color($color-info)};
        ////
        /// The background of the modal component header, for the info color variant
        /// @name header--background
        ////
        ----header--background: #{color('info-55')};
        ////
        /// The background of the modal component footer, for the info color variant
        /// @name footer--background
        ////
        ----footer--background: #{color('info-55')};
    }
    ////
    /// Variables for the success color variant
    /// @name success
    /// @type variant
    ////
    @include variant('success') {
        ////
        /// The background of the modal component, for the success color variant
        /// @name background
        ////
        ----background: #{color('success')};
        ////
        /// The border top color of the modal component, for the success color variant
        /// @name border-top-color
        ////
        ----border-top-color: #{color('success-60')};
        ////
        /// The border right color of the modal component, for the success color variant
        /// @name border-right-color
        ////
        ----border-right-color: #{color('success-60')};
        ////
        /// The border bottom color of the modal component, for the success color variant
        /// @name border-bottom-color
        ////
        ----border-bottom-color: #{color('success-60')};
        ////
        /// The border left color of the modal component, for the success color variant
        /// @name border-left-color
        ////
        ----border-left-color: #{color('success-60')};
        ////
        /// The color of the modal component, for the success color variant
        /// @name color
        ////
        ----color: #{contrast-color($color-success)};
        ////
        /// The background of the modal component header, for the success color variant
        /// @name header--background
        ////
        ----header--background: #{color('success-55')};
        ////
        /// The background of the modal component footer, for the success color variant
        /// @name footer--background
        ////
        ----footer--background: #{color('success-55')};
    }
    ////
    /// Variables for the warning color variant
    /// @name warning
    /// @type variant
    ////
    @include variant('warning') {
        ////
        /// The background of the modal component, for the warning color variant
        /// @name background
        ////
        ----background: #{color('warning')};
        ////
        /// The border top color of the modal component, for the warning color variant
        /// @name border-top-color
        ////
        ----border-top-color: #{color('warning-60')};
        ////
        /// The border right color of the modal component, for the warning color variant
        /// @name border-right-color
        ////
        ----border-right-color: #{color('warning-60')};
        ////
        /// The border bottom color of the modal component, for the warning color variant
        /// @name border-bottom-color
        ////
        ----border-bottom-color: #{color('warning-60')};
        ////
        /// The border left color of the modal component, for the warning color variant
        /// @name border-left-color
        ////
        ----border-left-color: #{color('warning-60')};
        ////
        /// The color of the modal component, for the warning color variant
        /// @name color
        ////
        ----color: #{contrast-color($color-warning)};
        ////
        /// The background of the modal component header, for the warning color variant
        /// @name header--background
        ////
        ----header--background: #{color('warning-55')};
        ////
        /// The background of the modal component footer, for the warning color variant
        /// @name footer--background
        ////
        ----footer--background: #{color('warning-55')};
    }
    ////
    /// Variables for the danger color variant
    /// @name danger
    /// @type variant
    ////
    @include variant('danger') {
        ////
        /// The background of the modal component, for the danger color variant
        /// @name background
        ////
        ----background: #{color('danger')};
        ////
        /// The border top color of the modal component, for the danger color variant
        /// @name border-top-color
        ////
        ----border-top-color: #{color('danger-60')};
        ////
        /// The border right color of the modal component, for the danger color variant
        /// @name border-right-color
        ////
        ----border-right-color: #{color('danger-60')};
        ////
        /// The border bottom color of the modal component, for the danger color variant
        /// @name border-bottom-color
        ////
        ----border-bottom-color: #{color('danger-60')};
        ////
        /// The border left color of the modal component, for the danger color variant
        /// @name border-left-color
        ////
        ----border-left-color: #{color('danger-60')};
        ////
        /// The color of the modal component, for the danger color variant
        /// @name color
        ////
        ----color: #{contrast-color($color-danger)};
        ////
        /// The background of the modal component header, for the danger color variant
        /// @name header--background
        ////
        ----header--background: #{color('danger-55')};
        ////
        /// The background of the modal component footer, for the danger color variant
        /// @name footer--background
        ////
        ----footer--background: #{color('danger-55')};
    }
}