/**
 * Color variants
 */

.table-wrapper {
    ////
    /// Variables for the primary color variant
    /// @name primary
    /// @type variant
    ////
    @include variant('primary') {
        ////
        /// The background of the table component, for the primary color variant
        /// @name background
        ////
        ----background: #{color('primary')};
        ////
        /// The background of the table component when hovered, for the primary color variant
        /// @name background--hover
        ////
        ----background--hover: #{color('primary-60')};
        ////
        /// The background of the table component when striped, for the primary color variant
        /// @name background--striped
        ////
        ----background--striped: #{color('primary-55')};
        ////
        /// The border color of the table component, for the primary color variant
        /// @name border-color
        ////
        ----border-color: #{color('primary-55')};
        ////
        /// The color of the table component, for the primary color variant
        /// @name color
        ////
        ----color: #{contrast-color($color-primary)};
    }
    ////
    /// Variables for the secondary color variant
    /// @name secondary
    /// @type variant
    ////
    @include variant('secondary') {
        ////
        /// The background of the table component, for the secondary color variant
        /// @name background
        ////
        ----background: #{color('secondary')};
        ////
        /// The background of the table component when hovered, for the secondary color variant
        /// @name background--hover
        ////
        ----background--hover: #{color('secondary-60')};
        ////
        /// The background of the table component when striped, for the secondary color variant
        /// @name background--striped
        ////
        ----background--striped: #{color('secondary-55')};
        ////
        /// The border color of the table component, for the secondary color variant
        /// @name border-color
        ////
        ----border-color: #{color('secondary-55')};
        ////
        /// The color of the table component, for the secondary color variant
        /// @name color
        ////
        ----color: #{contrast-color($color-secondary)};
    }
    ////
    /// Variables for the light color variant
    /// @name light
    /// @type variant
    ////
    @include variant('light') {
        ////
        /// The background of the table component, for the light color variant
        /// @name background
        ////
        ----background: #{color('white')};
        ////
        /// The background of the table component when hovered, for the light color variant
        /// @name background--hover
        ////
        ----background--hover: #{color('light-30')};
        ////
        /// The background of the table component when striped, for the light color variant
        /// @name background--striped
        ////
        ----background--striped: #{color('light-25')};
        ////
        /// The border color of the table component, for the light color variant
        /// @name border-color
        ////
        ----border-color: #{color('light-25')};
        ////
        /// The color of the table component, for the light color variant
        /// @name color
        ////
        ----color: #{contrast-color($color-light)};
    }
    ////
    /// Variables for the dark color variant
    /// @name dark
    /// @type variant
    ////
    @include variant('dark') {
        ////
        /// The background of the table component, for the dark color variant
        /// @name background
        ////
        ----background: #{color('dark')};
        ////
        /// The background of the table component when hovered, for the dark color variant
        /// @name background--hover
        ////
        ----background--hover: #{color('gray-40')};
        ////
        /// The background of the table component when striped, for the dark color variant
        /// @name background--striped
        ////
        ----background--striped: #{color('dark-45')};
        ////
        /// The border color of the table component, for the dark color variant
        /// @name border-color
        ////
        ----border-color: #{color('dark-45')};
        ////
        /// The color of the table component, for the dark color variant
        /// @name color
        ////
        ----color: #{contrast-color($color-dark)};
    }
    ////
    /// Variables for the info color variant
    /// @name info
    /// @type variant
    ////
    @include variant('info') {
        ////
        /// The background of the table component, for the info color variant
        /// @name background
        ////
        ----background: #{color('info')};
        ////
        /// The background of the table component when hovered, for the info color variant
        /// @name background--hover
        ////
        ----background--hover: #{color('info-60')};
        ////
        /// The background of the table component when striped, for the info color variant
        /// @name background--striped
        ////
        ----background--striped: #{color('info-55')};
        ////
        /// The border color of the table component, for the info color variant
        /// @name border-color
        ////
        ----border-color: #{color('info-55')};
        ////
        /// The color of the table component, for the info color variant
        /// @name color
        ////
        ----color: #{contrast-color($color-info)};
    }
    ////
    /// Variables for the success color variant
    /// @name success
    /// @type variant
    ////
    @include variant('success') {
        ////
        /// The background of the table component, for the success color variant
        /// @name background
        ////
        ----background: #{color('success')};
        ////
        /// The background of the table component when hovered, for the success color variant
        /// @name background--hover
        ////
        ----background--hover: #{color('success-60')};
        ////
        /// The background of the table component when striped, for the success color variant
        /// @name background--striped
        ////
        ----background--striped: #{color('success-55')};
        ////
        /// The border color of the table component, for the success color variant
        /// @name border-color
        ////
        ----border-color: #{color('success-55')};
        ////
        /// The color of the table component, for the success color variant
        /// @name color
        ////
        ----color: #{contrast-color($color-success)};
    }
    ////
    /// Variables for the warning color variant
    /// @name warning
    /// @type variant
    ////
    @include variant('warning') {
        ////
        /// The background of the table component, for the warning color variant
        /// @name background
        ////
        ----background: #{color('warning')};
        ////
        /// The background of the table component when hovered, for the warning color variant
        /// @name background--hover
        ////
        ----background--hover: #{color('warning-60')};
        ////
        /// The background of the table component when striped, for the warning color variant
        /// @name background--striped
        ////
        ----background--striped: #{color('warning-55')};
        ////
        /// The border color of the table component, for the warning color variant
        /// @name border-color
        ////
        ----border-color: #{color('warning-55')};
        ////
        /// The color of the table component, for the warning color variant
        /// @name color
        ////
        ----color: #{contrast-color($color-warning)};
    }
    ////
    /// Variables for the danger color variant
    /// @name danger
    /// @type variant
    ////
    @include variant('danger') {
        ////
        /// The background of the table component, for the danger color variant
        /// @name background
        ////
        ----background: #{color('danger')};
        ////
        /// The background of the table component when hovered, for the danger color variant
        /// @name background--hover
        ////
        ----background--hover: #{color('danger-60')};
        ////
        /// The background of the table component when striped, for the danger color variant
        /// @name background--striped
        ////
        ----background--striped: #{color('danger-55')};
        ////
        /// The border color of the table component, for the danger color variant
        /// @name border-color
        ////
        ----border-color: #{color('danger-55')};
        ////
        /// The color of the table component, for the danger color variant
        /// @name color
        ////
        ----color: #{contrast-color($color-danger)};
    }
}