/**
 * Variables
 */

.nav {
    ////
    /// The font size of the nav component
    /// @name font-size
    /// @type size
    ////
    ----font-size: #{font-size()};
    ////
    /// The padding top of the nav component
    /// @name padding-top
    /// @type size
    ////
    ----padding-top: #{var(--padding-top)};
    ////
    /// The padding right of the nav component
    /// @name padding-right
    /// @type size
    ////
    ----padding-right: #{var(--padding-right)};
    ////
    /// The padding bottom of the nav component
    /// @name padding-bottom
    /// @type size
    ////
    ----padding-bottom: #{var(--padding-bottom)};
    ////
    /// The padding left of the nav component
    /// @name padding-left
    /// @type size
    ////
    ----padding-left: #{var(--padding-left)};
    ////
    /// The padding of the nav component
    /// @name padding
    ////
    ----padding: #{var(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)};
    ////
    /// @name color
    /// @group light
    /// @type color
    ////
    ----color: contrast-color($color-light);
    ////
    /// The color of the nav component item when active
    /// @name color-active
    /// @group light
    /// @type color
    ////
    ----color--active: #{color('primary')};
    ////
    /// The color of the nav component item when disabled
    /// @name color-disabled
    /// @group light
    /// @type color
    ////
    ----color--disabled: var(--text-muted);
}