# List of Global Variables

## Typography

#### The `.lib-typography-all()` mixin variables

                Mixin variable
                Default value
                Comment

                Predefined font family

                @font-family__sans-serif
                'Helvetica Neue', Helvetica, Arial, sans-serif
                Sans-serif font family

                @font-family__serif
                Georgia, 'Times New Roman', Times, serif
                Serif font family

                @font-family__monospace
                Menlo, Monaco, Consolas, 'Courier New', monospace
                Monospace font family

                @font-path
                "../../fonts/"
                Path to custom font

                Predefined colors

                @color-white
                #fff
                White

                @color-gray20
                #333
                Gray 20

                @color-gray56
                #8f8f8f
                Gray 56

                @primary__color
                #555
                Primary color

                @primary__color__dark
                darken(@primary__color, 35%) // #000
                Dark primary color

                @primary__color__darker
                darken(@primary__color, 13.5%) // #111
                Darker primary color

                @primary__color__lighter
                lighten(@primary__color, 23%) // #7d7d7d
                Lighter primary color

                @primary__color__light
                lighten(@primary__color, 45%) // #a6a6a6
                Light primary color

                @border-color__base
                darken(@page__background-color, 18%)
                Base border color

                @border-width__base
                1px
                Base border width

                Fonts settings

                @font-family__base
                @font-family__sans-serif
                Basic font family

                @root__font-size
                62.5%
                Setting font-size for HTML tag, use % units

                @font-size-ratio__base
                1.4
                Defines ratio between root font size and base font size

                @font-size__base
                unit((@root__font-size / 100) * 16 * @font-size-ratio__base, px)
                Base font size value in px

                @font-size__xl
                ceil(1.5 * @font-size__base) // 21
                Extra large font size

                @font-size__l
                ceil(1.25 * @font-size__base) // 18
                Large font size

                @font-size__s
                ceil(.85 * @font-size__base) // 12
                Small font size

                @font-size__xs
                floor(.75 * @font-size__base) // 11
                Extra small font size

                @font-weight__regular
                400
                Basic font weight

                @font-weight__light
                200
                Light font weight

                @font-weight__semibold
                600
                Semibold font weight

                @font-weight__bold
                700
                Bold font weight

                @font-style__base
                normal
                Font style

                @font-style__emphasis
                italic
                Emphasis font style

                @line-height__base
                1.428571429
                Base line height

                @line-height__computed
                floor(@font-size__base * @line-height__base)
                Computed line height depending on base font size

                @line-height__l
                1.5
                Large line height

                @line-height__s
                1.33
                Small line height

                @text__color
                @primary__color
                Primary text color

                @text__color__intense
                @primary__color__darker
                Darker text color

                @text__color__muted
                @primary__color__lighter
                Lighter text color

                @indent__base
                @line-height__computed // 20px
                Base text ident (20px)

                @indent__xl
                @line-height__computed * 2 // 40px
                Extra large text ident (40px)

                @indent__l
                @line-height__computed * 1.5 // 30px
                Large text ident (30px)

                @indent__m
                @indent__base * 1.25 // 25px
                Extra large text ident (25px)

                @indent__s
                @line-height__computed / 2 //10px
                Small text ident (10px)

                @indent__xs
                @line-height__computed / 4 // 5px
                Extra small text ident (5px)

                Links

                @link__color
                #1979c3
                Links color

                @link__text-decoration
                none
                Links text decoration

                @link__visited__color
                #800080
                Visited links color

                @link__visited__text-decoration
                none
                Visited links text decoration

                @link__hover__color
                #006bb4
                Hovered links color

                @link__hover__text-decoration
                underline
                Hovered links text decoration

                @link__active__color
                #ff5501
                Active links color

                @link__active__text-decoration
                underline
                Active links text decoration

                Lists

                @list__color__base
                false
                List text color

                @list__font-size__base
                @font-size__base
                List font size

                @list__margin-top
                0
                List margin top

                @list__margin-bottom
                @indent__m
                List margin bottom

                @list-item__margin-top
                0
                List item margin top

                @list-item__margin-bottom
                @indent__s
                List item margin bottom

                Definition list

                @dl__margin-top
                0
                Definition list margin top

                @dl__margin-bottom
                @indent__base
                Definition list margin bottom

                @dt__margin-top
                0
                Description term margin top

                @dt__margin-bottom
                @indent__xs
                Description term margin bottom

                @dt__font-weight
                @font-weight__bold
                Description term

                @dd__margin-top
                0
                Description margin top

                @dd__margin-bottom
                @indent__s
                Description margin bottom

                Paragraphs

                @p__margin-top
                0
                Paragraph margin top

                @p__margin-bottom
                @indent__s
                Paragraph margin bottom

                Headings

                @heading__font-family__base
                false
                Heading base font family

                @heading__font-style__base
                false
                Heading base font style

                @heading__font-weight__base
                @font-weight__light
                Heading base font weight

                @heading__line-height__base
                1.1
                Heading base line height

                @heading__color__base
                false
                Heading base color

                @heading__margin-top__base
                @indent__base
                Heading base margin top

                @heading__margin-bottom__base
                @indent__base
                Heading base margin bottom

                H1

                @h1__font-size
                ceil((@font-size__base * 2.85)) // 40px
                H1 font size

                @h1__font-color
                @heading__color__base
                H1 color

                @h1__font-family
                @heading__font-family__base
                H1 font family

                @h1__font-weight
                @heading__font-weight__base
                H1 font weight

                @h1__font-style
                @heading__font-style__base
                H1 font style

                @h1__line-height
                @heading__line-height__base
                H1 line height

                @h1__margin-top
                0
                H1 margin top

                @h1__margin-bottom
                @heading__margin-bottom__base
                H1 margin bottom

                H2

                @h2__font-size
                ceil((@font-size__base * 1.85)) // 26px
                H2 font size

                @h2__font-color
                @heading__color__base
                H2 color

                @h2__font-family
                @heading__font-family__base
                H2 font family

                @h2__font-weight
                @heading__font-weight__base
                H2 font weight

                @h2__font-style
                @heading__font-style__base
                H2 font style

                @h2__line-height
                @heading__line-height__base
                H2 line height

                @h2__margin-top
                @indent__m
                H2 margin top

                @h2__margin-bottom
                @heading__margin-bottom__base
                H2 margin bottom

                H3

                @h3__font-size
                ceil((@font-size__base * 1.28)) // 18px
                H3 font size

                @h3__font-color
                @heading__color__base
                H3 color

                @h3__font-family
                @heading__font-family__base
                H3 font family

                @h3__font-weight
                @heading__font-weight__base
                H3 font weight

                @h3__font-style
                @heading__font-style__base
                H3 font style

                @h3__line-height
                @heading__line-height__base
                H3 line height

                @h3__margin-top
                @indent__base * .75
                H3 margin top

                @h3__margin-bottom
                @indent__s
                H3 margin bottom

                H4

                @h4__font-size
                @font-size__base // 14px
                H4 font size

                @h4__font-color
                @heading__color__base
                H4 color

                @h4__font-family
                @heading__font-family__base
                H4 font family

                @h4__font-weight
                @font-weight__bold
                H4 font weight

                @h4__font-style
                @heading__font-style__base
                H4 font style

                @h4__line-height
                @heading__line-height__base
                H4 line height

                @h4__margin-top
                @heading__margin-top__base
                H4 margin top

                @h4__margin-bottom
                @heading__margin-bottom__base
                H4 margin bottom

                H5

                @h5__font-size
                ceil((@font-size__base * .85)) // 12px
                H5 font size

                @h5__font-color
                @heading__color__base
                H5 color

                @h5__font-family
                @heading__font-family__base
                H5 font family

                @h5__font-weight
                @font-weight__bold
                H5 font weight

                @h5__font-style
                @heading__font-style__base
                H5 font style

                @h5__line-height
                @heading__line-height__base
                H5 line height

                @h5__margin-top
                @heading__margin-top__base
                H5 margin top

                @h5__margin-bottom
                @heading__margin-bottom__base
                H5 margin bottom

                H6

                @h6__font-size
                ceil((@font-size__base * .7)) // 10px
                H6 font size

                @h6__font-color
                @heading__color__base
                H6 color

                @h6__font-family
                @heading__font-family__base
                H6 font family

                @h6__font-weight
                @heading__font-weight__base
                H6 font weight

                @h6__font-style
                @heading__font-style__base
                H6 font style

                @h6__line-height
                @heading__line-height__base
                H6 line height

                @h6__margin-top
                @heading__margin-top__base
                H6 margin top

                @h6__margin-bottom
                @heading__margin-bottom__base
                H6 margin bottom

                <small> tags and tags with class .small placed in H1-H6 headings

                @heading__small-color
                @primary__color
                <small> and .small heading element color

                @heading__small-line-height
                1
                <small> and .small heading element line height

                @heading__small-size
                (@font-size__xs/@font-size__base) * 100%
                <small> and .small heading element font size

                Focus

                @focus__box-shadow
                0 0 3px 1px @focus__color
                Focused element highlight

                Code blocks

                @code__background-color
                @panel__background-color
                Code block background

                @code__color
                @primary__color__darker
                Code text color

                @code__font-size
                @font-size__s
                Code font size

                @code__padding
                2px 4px
                Code padding

                @pre__background-color
                @primary__color__light
                Preformatted text background color

                @pre__border-color
                @border-color__base
                Preformatted text border color

                @pre__border-width
                @border-width__base
                Preformatted text border width

                @pre__color
                @primary__color__darker
                Preformatted text color

                @kbd__background-color
                @panel__background-color
                Keyboard input background

                @kbd__color
                @primary__color__darker
                Keyboard input text color

                Blockquote

                @blockquote__border-color
                @border-color__base
                Blockquote border color

                @blockquote__border-width
                0
                Blockquote border width

                @blockquote__content-before
                '\2014 \00A0'
                "-" and space symbols

                @blockquote__font-size
                @font-size__base
                Blockquote font size

                @blockquote__font-style
                @font-style__emphasis
                Blockquote font style

                @blockquote__margin
                 0 0 @indent__base @indent__xl
                Blockquote margin

                @blockquote__padding
                0
                Blockquote padding

                @blockquote-small__color
                @primary__color
                Blockquote <small> and .small text color

                @blockquote-small__font-size
                @font-size__xs
                Blockquote <small> and .small font size

                Cite

                @cite__font-style
                @font-style__base
                Cite font style

                Other elements

                @hr__border-color
                @border-color__base
                HR border color

                @hr__border-style
                solid
                HR border style

                @hr__border-width
                @border-width__base
                HR border width

                @mark__color
                @primary__color__dark
                <mark> color

                @mark__background-color
                @panel__background-color
                <mark> background

                @abbr__border-color
                @border-color__base
                <abbr> border color

                @disable-filters
                false
                Disable filters output in css

## Structure

#### Predefined variables for handle global Z-axis positioning

                Variable
                Default value
                Allowed values

            @z-index-1
            100
            constant

            @z-index-2
            200
            constant

            @z-index-3
            300
            constant

            @z-index-4
            400
            constant

            @z-index-5
            500
            constant

            @z-index-6
            600
            constant

            @z-index-7
            700
            constant

            @z-index-8
            800
            constant

            @z-index-9
            900
            constant

            @z-index-10
            1000
            constant

          Nesting example

            @modal__z-index
            @z-index-9
            @z-index-N

## Actions Toolbar

#### The `.lib-actions-toolbar()` mixin variables

            Mixin variable
            Default value
            Allowable values
            Comment

            @_actions-toolbar-actions-position
            justify
            justify | left | right | center
            Position for actions in Actions toolbar

            @_actions-toolbar-actions-reverse
            false
            true | false
            Reverse primary and secondary blocks position in Actions toolbar

            @_actions-toolbar-margin
            false
            '' | false | value
            Margins of the Actions toolbar

            @_actions-toolbar-padding
            false
            '' | false | value
            Paddings of the Actions toolbar

            @_actions-toolbar-actions-margin
            false
            '' | false | value
            Margins of all .actions in the Actions toolbar

            @_actions-toolbar-primary-actions-margin
            0 @indent__xs 0 0
            '' | false | value
            Margins of primary .actions in the Actions toolbar

            @_actions-toolbar-secondary-actions-margin
            false
            '' | false | value
            Margins of secondary .actions in the Actions toolbar

            @_actions-toolbar-actions-links-margin-top
            false
            '' | false | value
            Margin-top for links with class .action in the Actions toolbar

            @_actions-toolbar-primary-actions-links-margin-top
            false
            '' | false | value
            Margin-top for primary links with class .action in the Actions toolbar

            @_actions-toolbar-secondary-actions-links-margin-top
            6px
            '' | false | value
            Margin-top for secondary links with class .action in the Actions toolbar

## Breadcrumbs variables

#### The `.lib-breadcrumbs()` mixin variables

            Mixin variable
            Default value
            Allowed values
            Comment

            @_breadcrumbs-font-size
            @font-size__s
            '' | false | value
            Breadcrumbs font size

            @_breadcrumbs-display
            false
            '' | false | inline | block | inline-block
            Breadcrumbs links display property

            @_@breadcrumbs__container-margin
             0 0 @indent__base
            '' | false | value
            Breadcrumbs items padding

            @_breadcrumbs-padding
            false
            '' | false | value
            Breadcrumbs items padding

            Breadcrumbs - separator symbol

            @_breadcrumbs-separator-symbol
            false
            '' | false | any symbol
            Breadcrumbs separating symbol

            @_breadcrumbs-separator-color
            @breadcrumbs-current__color
            '' | false | value
            Breadcrumbs separating symbol color

            @_breadcrumbs-icon-use
            true
            true | false
            Breadcrumbs separating symbol is an icon

            @_breadcrumbs-font-content
            @icon-next
            '' | false | icon
            Breadcrumbs separating icon symbol

            @_breadcrumbs-icon-font
            @icon-font
            '' | false | font
            Breadcrumbs separating icon font

            @_breadcrumbs-icon-font-size
            24px
            '' | false | value
            Breadcrumbs separating icon font size

            @_breadcrumbs-icon-font-line-height
            18px
            '' | false | value
            Breadcrumbs separating icon line height

            @_breadcrumbs-icon-font-color
            false
            '' | false | value
            Breadcrumbs separating icon color

            @_breadcrumbs-icon-font-margin
            0
            '' | false | value
            Breadcrumbs separating icon margin

            @_breadcrumbs-icon-font-vertical-align
            top
            '' | false | value
            Breadcrumbs separating icon vertical align

            Breadcrumbs - current page

            @_breadcrumbs-current-color
            #a3a3a3
            '' | false | value
            Breadcrumbs current page color

            @_breadcrumbs-current-font-weight
            @font-weight__regular
            '' | false | value
            Breadcrumbs current page font weight

            @_breadcrumbs-current-background
            false
            '' | false | value
            Breadcrumbs current page background

            @_breadcrumbs-current-border
            false
            '' | false | value
            Breadcrumbs current page border

            @_breadcrumbs-current-gradient
            false
            true | false
            Breadcrumbs current page have gradient background

            @_breadcrumbs-current-gradient-direction
            false
            '' | false | vertical | horizontal
            Direction of breadcrumbs current page background gradient (if there is any)

            @_breadcrumbs-current-gradient-color-start
            false
            '' | false | value
            Breadcrumbs current page gradient start color

            @_breadcrumbs-current-gradient-color-end
            false
            '' | false | value
            Breadcrumbs current page gradient end color

            Breadcrumbs link

            @_breadcrumbs-link-gradient
            false
            true | false
            Breadcrumbs items have gradient background

            @_breadcrumbs-link-gradient-direction
            false
            '' | false | vertical | horizontal
            Direction of breadcrumbs item background gradient (if there is any)

            Breadcrumbs link - default

            @_breadcrumbs-link-color
            @primary__color
            '' | false | value
            Breadcrumbs item color

            @_breadcrumbs-link-background
            false
            '' | false | value
            Breadcrumbs item background

            @_breadcrumbs-link-border
            false
            '' | false | value
            Breadcrumbs item border

            @_breadcrumbs-link-text-decoration
            none
            '' | false | value
            Breadcrumbs item text decoration

            @_breadcrumbs-link-gradient-color-start
            false
            '' | false | value
            Breadcrumbs item gradient start color

            @_breadcrumbs-link-gradient-color-end
            false
            '' | false | value
            Breadcrumbs item gradient end color

            Breadcrumbs link - visited

            @_breadcrumbs-link-color-visited
            @primary__color
            '' | false | value
            Breadcrumbs item visited color

            @_breadcrumbs-link-background-visited
            @breadcrumbs-link__background
            '' | false | value
            Breadcrumbs item visited background

            @_breadcrumbs-link-border-visited
            @breadcrumbs-link__border
            '' | false | value
            Breadcrumbs item visited border

            @_breadcrumbs-link-text-decoration-visited
            none
            '' | false | value
            Breadcrumbs item text decoration

            @_breadcrumbs-link-gradient-color-start-visited
            false
            '' | false | value
            Breadcrumbs item visited gradient start color

            @_breadcrumbs-link-gradient-color-end-visited
            false
            '' | false | value
            Breadcrumbs item visited gradient end color

            Breadcrumbs link - hover

            @_breadcrumbs-link-color-hover
            @primary__color
            '' | false | value
            Breadcrumbs item hover color

            @_breadcrumbs-link-background-hover
            false
            '' | false | value
            Breadcrumbs item hover background

            @_breadcrumbs-link-border-hover
            @breadcrumbs-link__border
            '' | false | value
            Breadcrumbs item hover border

            @_breadcrumbs-link-text-decoration-hover
            underline
            '' | false | value
            Breadcrumbs item hover text decoration

            @_breadcrumbs-link-gradient-color-start-hover
            false
            '' | false | value
            Breadcrumbs item hover gradient start color

            @_breadcrumbs-link-gradient-color-end-hover
            false
            '' | false | value
            Breadcrumbs item hover gradient end color

            Breadcrumbs link - active

            @_breadcrumbs-link-color-active
            @primary__color
            '' | false | value
            Breadcrumbs item active color

            @_breadcrumbs-link-background-active
            @breadcrumbs-link__background
            '' | false | value
            Breadcrumbs item active background

            @_breadcrumbs-link-border-active
            @breadcrumbs-link__border
            '' | false | value
            Breadcrumbs item active border

            @_breadcrumbs-link-text-decoration-active
            none
            '' | false | value
            Breadcrumbs item active text decoration

            @_breadcrumbs-link-gradient-color-start-active
            false
            '' | false | value
            Breadcrumbs item active gradient start color

            @_breadcrumbs-link-gradient-color-end-active
            false
            '' | false | value
            Breadcrumbs item active gradient end color

## Button variables

#### The `.lib-button()` mixin variables

            Mixin variable
            Default value
            Allowed values
            Comment

            @_button-font-family
            @font-family__base
            '' | false | value
            Button font family

            @_button-font-size
            @font-size__base
            '' | false | value
            Button font size

            @_button-font-weight
            @font-weight__bold
            '' | false | value
            Button font weight

            @_button-cursor
            pointer
            '' | false | value
            Button cursor

            @_button-display
            inline-block
            '' | false | value
            Button display

            @_button-disabled-opacity
            .5
            '' | false | value
            Button disabled opacity

            @_button-line-height
            @font-size__base + 2
            '' | false | value
            Button height

            @_button-width
            false
            '' | false | value
            Button width

            @_button-margin
            0
            '' | false | value
            Button margin

            @_button-padding
            7px 15px
            '' | false | value
            Button padding

            @_button-gradient
            false
            '' | false | true
            Button has gradient background

            @_button-gradient-direction
            false
            '' | false | vertical | horizontal
            Direction of button background gradient (if there is any)

            Button default state

            @_button-color
            @primary__color
            '' | false | value
            Button text color

            @_button-background
            #f2f2f2
            '' | false | value
            Button background

            @_button-border
            1px solid #cdcdcd
            '' | false | value
            Button border

            @_button-gradient-color-start
            false
            '' | false | value
            Gradient background start color

            @_button-gradient-color-end
            false
            '' | false | value
            Gradient background end color

            Button hover state

            @_button-color-hover
            #555
            '' | false | value
            Hovered button text color

            @_button-background-hover
            #e2e2e2
            '' | false | value
            Hovered button background

            @_button-border-hover
            v
            '' | false | value
            Hovered button border

            @_button-gradient-color-start-hover
            false
            '' | false | value
            Hovered button gradient background start color

            @_button-gradient-color-end-hover
            false
            '' | false | value
            Hovered button gradient background end color

            Button active state

            @_button-color-active
            @button__color
            '' | false | value
            Active button text color

            @_button-background-active
            @button__hover__background
            '' | false | value
            Active button background

            @_button-border-active
            @button__border
            '' | false | value
            Active button border

            @_button-gradient-color-start-active

            false
            '' | false | value
            Active button gradient background start color

            @_button-gradient-color-end-active
            false
            '' | false | value
            Active button gradient background end color

            Button with icon

            @_button-icon-use
            false
            '' | false | true
            Button has an icon

            @_button-font-content
            @icon-settings
            '' | false | value
            Button icon symbol

            @_button-icon-font
            @icon-font
            '' | false | value
            Button icon font

            @_button-icon-font-size
            22px
            '' | false | value
            Button icon font size

            @_button-icon-font-line-height
            @button-icon__font-size
            '' | false | value
            Button icon line height

            @_button-icon-font-color
            inherit
            '' | false | value
            Button icon color

            @_button-icon-font-color-hover
            inherit
            '' | false | value
            Hovered button icon color

            @_button-icon-font-color-active
            inherit
            '' | false | value
            Active button icon color

            @_button-icon-font-margin
            0
            '' | false | value
            Button icon margin

            @_button-icon-font-vertical-align
            top
            '' | false | value
            Button icon vertical align

            @_button-icon-font-position
            @icon__position
            '' | false | before | after
            Button icon font position

            @_button-icon-font-text-hide
            false
            '' | false | true
            Button icon text hide

#### The `.lib-button-primary()` mixin variables

In the variables list primary buttons are configured with `@button-primary` prefix. So for example to configure primary button background you should use `@_button-background` variable of the mixin or `@button-primarybackground` of the global variables list.

                Mixin variable
                Default value
                Allowed values
                Comment

                @_button-line-height
                false
                '' | false | value
                Button line-height

                @_button-width
                false
                '' | false | value
                Button width

                @_button-margin
                false
                '' | false | value
                Button margin

                @_button-padding
                @buttonpadding
                '' | false | value
                Button padding

                @_button-gradient
                false
                '' | false | true
                Button has gradient background

                @_button-gradient-direction
                false
                '' | false | vertical | horizontal
                Direction of button background gradient (if there is any)

                Button default state

                @_button-background
                #1979c3
                '' | false | value
                Button background

                @_button-border
                1px solid #1979c3
                '' | false | value
                Button border

                @_button-color
                #fff
                '' | false | value
                Button text color

                @_button-gradient-color-start
                false
                '' | false | value
                Gradient background start color

                @_button-gradient-color-end
                false
                '' | false | value
                Gradient background end color

                Button hover state

                @_button-background-hover
                #006bb4
                '' | false | value
                Hovered button background

                @_button-border-hover
                1px solid #006bb4
                '' | false | value
                Hovered button border

                @_button-color-hover
                @button-primarycolor
                '' | false | value
                Hovered button text color

                @_button-gradient-color-start-hover
                false
                '' | false | value
                Hovered button gradient background start color

                @_button-gradient-color-end-hover
                false
                '' | false | value
                Hovered button gradient background end color

                Button active state

                @_button-background-active
                @button-primaryhoverbackground
                '' | false | value
                Active button background

                @_button-border-active
                @button-primaryhoverborder
                '' | false | value
                Active button border

                @_button-color-active
                @button-primary__color
                '' | false | value
                Active button text color

                @_button-gradient-color-start-active
                false
                '' | false | value
                Active button gradient background start color

                @_button-gradient-color-end-active
                false
                '' | false | value
                Active button gradient background end color

#### The `.lib-button-revert-secondary-color()` mixin variables

The `.lib-button-revert-secondary-color()` mixin is used to revert button styles to secondary color styles.

            Mixin variable
            Default value
            Allowed values
            Comment

            @_button-color
            @buttoncolor
            '' | false | value
            Button color

            @_button-background
            @buttonbackground
            '' | false | value
            Button background

            @_button-border
            @buttonborder
            '' | false | value
            Button border

            @_button-color-hover
            @buttonhovercolor
            '' | false | value
            Button hover color

            @_button-background-hover
            @buttonhoverbackground
            '' | false | value
            Button hover background

            @_button-border-hover
            @buttonhoverborder
            '' | false | value
            Button hover border

            @_button-color-active
            @buttonactivecolor
            '' | false | value
            Button active color

            @_button-background-active
            @buttonactivebackground
            '' | false | value
            Button active background

            @_button-border-active
            @buttonactive__border
            '' | false | value
            Button active border

#### The `.lib-button-revert-secondary-size()` mixin variables

The `.lib-button-revert-secondary-size()` mixin is used to revert button sizes to secondary button sizes.

            Mixin variable
            Default value
            Allowed values
            Comment

            @_button-font-size
            @buttonfont-size
            '' | value
            Button font size

            @_button-line-height
            @buttonline-height
            '' | value
            Button line-height

            @_button-padding
            @button__padding
            '' | value
            Button padding

#### The `.lib-button-as-link()` mixin variables

The `.lib-button-as-link()` mixin is used to make button look like a link. It resets default button styles.

                Mixin variable
                Default value
                Allowed values
                Comment

                @_link-color
                @link-color
                '' | false | value
                Button as a link color

                @_link-color-hover
                @link-color-hover
                '' | false | value
                Button as a link hovered color

                @_line-height
                @line-height-base
                '' | false | value
                Button as a link line height

                @_margin
                0
                '' | false | value
                Button as a link margin

                @_padding
                0
                '' | false | value
                Button as a link padding

## Drop-down variables

#### The `.lib-dropdown()` mixin variables

                Mixin variable
                Default value
                Allowed values
                Comment

                @_dropdown-actions-padding
                false
                '' | false | value
                Drop-down toggle element padding

                Drop-down list

                @_dropdown-list-position-top
                100%
                '' | false | value
                Drop-down list position: top

                @_dropdown-list-position-right
                false
                '' | false | value
                Drop-down list position: right

                @_dropdown-list-position-bottom
                false
                '' | false | value
                Drop-down list position: bottom

                @_dropdown-list-position-left
                false
                '' | false | value
                Drop-down list position: left

                @_dropdown-list-background
                @color-white
                '' | false | value
                Drop-down list background

                @_dropdown-list-border
                1px solid #bbb
                '' | false | value
                Drop-down list border

                @_dropdown-list-pointer
                true
                true | false
                Drop-down list pointer is visible

                @_dropdown-list-pointer-border
                #bbb
                '' | false | value
                Drop-down list pointer border

                @_dropdown-list-item-border
                0
                '' | false | value
                Drop-down list item border

                @_dropdown-list-item-padding
                3px 5px
                '' | false | value
                Drop-down list item padding

                @_dropdown-list-item-margin
                0
                '' | false | value
                Drop-down list item margin

                @_dropdown-list-item-hover
                #e8e8e8
                '' | false | value
                Drop-down list item hovered background

                @_dropdown-list-shadow
                0 3px 3px rgba(0,0,0,.15)
                '' | false | value
                Drop-down list shadow

                @_dropdown-list-z-index
                100
                '' | false | value
                Drop-down list z-index

                Drop-down icon

                @_dropdown-toggle-icon-content
                @icon-pointer-down
                '' | false | value
                Drop-down toggle icon symbol code for default state

                @_dropdown-toggle-active-icon-content
                @icon-pointer-up
                '' | false | value
                Drop-down toggle icon symbol code for active state

                @_icon-font
                @button-icon__font
                '' | false | value
                Drop-down toggle icon font

                @_icon-font-size
                @button-icon__font-size
                '' | false | value
                Drop-down toggle icon font size

                @_icon-font-line-height
                @button-icon__line-height
                '' | false | value
                Drop-down toggle icon line height

                @_icon-font-color
                @button-icon__color
                '' | false | value
                Drop-down toggle icon color

                @_icon-font-color-hover
                @button-icon__hover__font-color
                '' | false | value
                Drop-down toggle icon hovered color

                @_icon-font-color-active
                @button-icon__active__font-color
                '' | false | value
                Drop-down toggle icon active color

                @_icon-font-margin
                @button-icon__margin
                '' | false | value
                Drop-down toggle icon margin

                @_icon-font-position
                after
                before | after
                Drop-down toggle icon position

                @_icon-font-vertical-align
                @button-icon__vertical-align
                '' | false | value
                Drop-down toggle icon vertical align

                @_icon-font-text-hide
                @button-icon__text-hide
                true | false
                Text in the tag, that contains icon, is hidden

## Split button variables

#### The `.lib-dropdown-split()` mixin variables

                Mixin variable
                Default value
                Allowed values
                Comment

                @_dropdown-split-actions-padding
                0 @indent__xs
                '' | false | value
                Split button toggle element padding

                @_dropdown-split-toggle-position
                right
                '' | false | value
                Split button toggle element position

                Drop-down list

                @_dropdown-split-list-position-top
                @dropdown-list__position-top
                '' | false | value
                Split button drop-down list position: top

                @_dropdown-split-list-position-right
                @dropdown-list__position-right
                '' | false | value
                Split button drop-down list position: right

                @_dropdown-split-list-position-bottom
                @dropdown-list__position-bottom
                '' | false | value
                Split button drop-down list position: bottom

                @_dropdown-split-list-position-left
                @dropdown-list__position-left
                '' | false | value
                Split button drop-down list position: left

                @_dropdown-split-list-background
                @dropdown-list__background
                '' | false | value
                Split button drop-down background

                @_dropdown-split-list-border
                @dropdown-list__border
                '' | false | value
                Split button drop-down border

                @_dropdown-split-list-pointer
                @dropdown-list__pointer
                '' | false | value
                Split button drop-down list pointer

                @_dropdown-split-list-pointer-border
                @dropdown-list-pointer__border
                '' | false | value
                Split button drop-down list pointer border

                @_dropdown-split-button-border-radius-fix
                false
                true | false
                Split button drop-down list item border

                @_dropdown-split-list-item-border
                @dropdown-list-item__border
                '' | false | value
                Split button drop-down list item border

                @_dropdown-split-list-item-padding
                @dropdown-list-item__padding
                '' | false | value
                Split button drop-down list item padding

                @_dropdown-split-list-item-margin
                @dropdown-list-item__margin
                '' | false | value
                Split button drop-down list item margin

                @_dropdown-split-list-item-hover
                @dropdown-list-item__hover
                '' | false | value
                Split button drop-down list item hovered background

                @_dropdown-split-list-shadow
                @dropdown-list__shadow
                '' | false | value
                Split button drop-down list shadow

                @_dropdown-split-list-z-index
                @dropdown-list__z-index
                '' | false | value
                Split button drop-down list z-index

                Dropdown icon

                @_dropdown-split-toggle-icon-content
                @dropdown-toggle-icon__content
                '' | false | value
                Split button drop-down toggle icon - default state

                @_dropdown-split-toggle-active-icon-content
                @dropdown-toggle-icon__active__content
                '' | false | value
                Split button drop-down toggle icon - active state

                @_icon-font
                @button-icon__font
                '' | false | value
                Split button drop-down toggle icon font

                @_icon-font-size
                @button-icon__font-size
                '' | false | value
                Split button drop-down toggle icon font size

                @_icon-font-line-height
                @button-icon__line-height
                '' | false | value
                Split button drop-down toggle icon line height

                @_icon-font-color
                @button-icon__color
                '' | false | value
                Split button drop-down toggle icon color

                @_icon-font-color-hover
                @button-icon__hover__font-color
                '' | false | value
                Split button drop-down toggle icon hovered color

                @_icon-font-color-active
                @button-icon__active__font-color
                '' | false | value
                Split button drop-down toggle icon active color

                @_icon-font-margin
                @button-icon__margin
                '' | false | value
                Split button drop-down toggle icon margin

                @_icon-font-position
                after
                before | after
                Split button drop-down toggle icon position

                @_icon-font-vertical-align
                @button-icon__vertical-align
                '' | false | value
                Split button drop-down toggle icon vertical align

                @_icon-font-text-hide
                @button-icon__text-hide
                true | false
                The text in the toggle tag is hidden

## Forms variables

#### The `.lib-form-fieldset()` mixin variables

                Mixin variable
                Global variable
                Default value
                Comment

                @_border
                @form-fieldset__border
                0
                Fieldset border

                @_margin
                @form-fieldset__margin
                 0 0 @indent__xl
                Fieldset margin

                @_padding
                @form-fieldset__padding
                0
                Fieldset padding

                @_legend-color
                @form-fieldset-legend__color
                false
                Legend color

                @_legend-font-size
                @form-fieldset-legend__font-size
                20px
                Legend font size

                @_legend-font-family
                @form-fieldset-legend__font-family
                false
                Legend font family

                @_legend-font-weight
                @form-fieldset-legend__font-weight
                false
                Legend font weight

                @_legend-font-style
                @form-fieldset-legend__font-style
                false
                Legend font style

                @_legend-line-height
                @form-fieldset-legend__line-height
                1.2
                Legend line height

                @_legend-margin
                @form-fieldset-legend__margin
                0 0 @indent__m
                Legend margin

                @_legend-padding
                @form-fieldset-legend__padding
                0
                Legend padding

                @_legend-width
                @form-fieldset-legend__width
                false
                Legend width

#### The `.lib-form-field()` mixin variables

                Mixin variable
                Global variable
                Default values [Allowable values]
                Comment

                @_type
                @form-field-type
                inline [inline | block]
                How to display from field element and its label. When set to 'inline' they are displayed side-by-side. When set to 'block' the label is displayed above the control

                @_border
                @form-field__border
                false
                Border of the <div class="field"> element

                @_column
                @form-field-column
                false [true | false]
                Form fields are displayed in columns

                @_column-padding
                @form-field-column__padding
                0 12px 0 0
                Form fields column padding

                @_column-number
                @form-field-column__number
                2
                Form fields number of columns

                @_type-block-margin
                @form-field-type-block__margin
                0 0 @form-field__vertical-indent
                Form fields margin if @form-field-type set to is 'block'

                @_type-inline-margin
                @form-field-type-inline__margin
                0 0 @form-field__vertical-indent
                Form fields margin if @form-field-type is set to 'inline'

                Form field label

                @_label-color
                @form-field-label__align
                false
                Field label text color

                @_label-color
                @form-field-label__color
                false
                Field label text color

                @_label-font-size
                @form-field-label__font-size
                false
                Field label font size

                @_label-font-family
                @form-field-label__font-family
                false
                Field label font family

                @_label-font-weight
                @form-field-label__font-weight
                @font-weight__bold
                Field label font weight

                @_label-font-style
                @form-field-label__font-style
                false
                Field label font style

                @_label-line-height
                @form-field-label__line-height
                false
                Field label line height

                @_type-block-label-margin
                @form-field-type-label-block__margin
                0 0 @indent__xs
                Field label margin if @form-field-type is set to 'block'

                @_type-inline-label-padding
                @form-field-type-label-inline__padding
                @form-field-type-label-inline__padding-top 15px 0 0
                Field label padding if @form-field-type is set to 'inline'

                @_type-inline-label-width
                @form-field-type-label-inline__width
                25.8%
                Field label width if @form-field-type is set to 'inline'

                @_type-inline-control-width
                @form-field-type-control-inline__width
                74.2%
                Field control width if @form-field-type is set to 'inline'

                Label "required" asterisk

                @_label-asterisk-color
                @form-field-label-asterisk__color
                #da370a
                Label asterisk color

                @_label-asterisk-font-size
                @form-field-label-asterisk__font-size
                @font-size__s
                Label asterisk font size

                @_label-asterisk-font-family
                @form-field-label-asterisk__font-family
                false
                Label asterisk font family

                @_label-asterisk-font-weight
                @form-field-label-asterisk__font-weight
                false
                Label asterisk font weight

                @_label-asterisk-font-style
                @form-field-label-asterisk__font-style
                false
                Label asterisk font style

                @_label-asterisk-line-height
                @form-field-label-asterisk__line-height
                false
                Label asterisk line height

                @_label-asterisk-margin
                @form-field-label-asterisk__margin
                0 0 0 @indent__xs
                Label asterisk margin

                Field note

                @_note-color
                @form-field-note__color
                false
                Field note text color

                @_note-font-size
                @form-field-note__font-size
                @font-size__s
                Field note font size

                @_note-font-family
                @form-field-note__font-family
                false
                Field note font family

                @_note-font-weight
                @form-field-note__font-weight
                false
                Field note font weight

                @_note-font-style
                @form-field-note__font-style
                false
                Field note font style

                @_note-line-height
                @form-field-note__line-height
                false
                Field note line height

                @_note-margin
                @form-field-note__margin
                3px 0 0
                Field note margin

                @_note-padding
                @form-field-note__padding
                0
                Field note padding

                @_note-icon-font-content
                @form-field-note-icon-font__content
                @icon-pointer-up
                Field note icon code

                @_note-icon-font
                @form-field-note-icon-font
                @icon-font
                Field note icon font

                @_note-icon-font-size
                @form-field-note-icon-font__size
                @form-field-note__font-size*2
                Field note icon font size

                @_note-icon-font-line-height
                @form-field-note-icon-font__line-height
                @form-field-note__font-size
                Field note icon line height

                @_note-icon-font-color
                @form-field-note-icon-font__color
                @form-field-note__color
                Field note icon color

                @_note-icon-font-color-hover
                @form-field-note-icon-font__color-hover
                false
                Field note icon hovered color

                @_note-icon-font-color-active
                @form-field-note-icon-font__color-active
                false
                Field note icon active color

                @_note-icon-font-margin
                @form-field-note-icon-font__margin
                false
                Field note icon margin

                @_note-icon-font-vertical-align
                @form-field-note-icon-font__vertical-align
                @icon-font__vertical-align
                Field note icon vertical align

                @_note-icon-font-position
                @form-field-note-icon-font__position
                @icon-font__position [before | after]
                Field note icon position

                @_note-icon-font-text-hide
                @form-field-note-icon-font__text-hide
                @icon-font__text-hide [true | false]
                Field note icon text hide

#### The `.lib-form-hasrequired()` mixin variables

                Mixin variable
                Global variable
                Default values [Allowable values]
                Comment

                @_position
                @form-hasrequired__position
                top [top | bottom]
                Position of "required fields" notice

                @_color
                @form-hasrequired__color
                @form-field-label-asterisk__color
                Text color of "required fields" notice

                @_font-size
                @form-hasrequired__font-size
                @font-size__s
                Font size of "required fields" notice

                @_font-family
                @form-hasrequired__font-family
                false
                Font family of "required fields" notice

                @_font-weight
                @form-hasrequired__font-weight
                false
                Font weight of "required fields" notice

                @_font-style
                @form-hasrequired__font-style
                false
                Font style of "required fields" notice

                @_line-height
                @form-hasrequired__line-height
                false
                Line height of "required fields" notice

                @_border
                @form-hasrequired__border
                false
                Border of "required fields" notice

                @_margin
                @form-hasrequired__margin
                @indent__s 0 0
                Margin of "required fields" notice

                @_padding
                @form-hasrequired__padding
                false
                Padding of "required fields" notice

#### The `.lib-form-element-input() mixin variables`

                Mixin variable
                Global variable
                Default value [Allowable value]
                Comment

                @_type
                @form-element-input-type
                '' [input-text | select | textarea | input-radio | input-checkbox]
                Form control type.
    @form-element-input__[] global variables are used to set up all form elements style. Control-specific global variables use these @form-element-input__[] variables by default. Control-specific global variables can be set up separately.
    @input-text__[] is used to set up input-text controls style
    @select__[] is used to set up selects style
    @textarea__[] is used to set up textarea style

                @_background
                @form-element-input__background
    @input-text__background
    @selectbackground
    @textarea__background
                @color-white
    @form-element-input__background
    @form-element-input__background
    @form-element-input__background
                Form control background

                @_border
                @form-element-input__border
    @input-text__border
    @select__border
    @textarea__border
                1px solid @form-element-input__border-color
    @form-element-input__border
    @form-element-input__border
    @form-element-input__border
                Form control border

                @_border-radius
                @form-element-input__border-radius
    @input-textborder-radius
    @select__border-radius
    @textarea__border-radius
                1px
    @form-element-input__border-radius
    @form-element-input__border-radius
    @form-element-input__border-radius
                Form control border radius

                @_height
                @form-element-input__height
    @input-text__height
    @select__height
    @textarea__height
                32px
    @form-element-input__height
    @form-element-input__height
    auto
                Form control height

                @_width
                @form-element-input__width
    @input-text__width
    @select__width
    @textarea__width
                100%
    @form-element-input__width
    @form-element-input__width
    @form-element-input__width
                Form control width

                @_margin
                @form-element-input__margin
    @input-text__margin
    @select__margin
    @textarea__margin
                false [true | false]
    @form-element-input__margin
    @form-element-input__margin
    0
                Form control margin

                @_padding
                @form-element-input__padding
    @input-text__padding
    @select__padding
    @textarea__padding
                0 9px
    @form-element-input__padding
    5px 10px 4px
    @indent__s
                Form control padding

                @_vertical-align
                @form-element-input__vertical-align
    @input-text__vertical-align
    @select__vertical-align
    @textarea__vertical-align
                baseline
    @form-element-input__vertical-align
    @form-element-input__vertical-align
    @form-element-input__vertical-align
                Form control vertical align

                @_background-clip
                @form-element-input__background-clip

    @input-text__background-clip
    @select__background-clip
    @textarea__background-clip
                padding-box
    [padding-box | border-box | content-box]
    @form-element-input__background-clip
    @form-element-input__background-clip
    @form-element-input__background-clip
                Form control background clip

                Text settings

                @_color
                @form-element-input__color
    @input-text__color
    @select__color
    @textarea__color
                false
    @form-element-input__color
    @form-element-input__color
    @form-element-input__color
                Form control text color

                @_font-size
                @form-element-input__font-size
    @input-text__font-size
    @select__font-size
    @textarea__font-size
                @font-size__base
    @form-element-input__font-size
    @form-element-input__font-size
    @form-element-input__font-size
                Form control font size

                @_font-family
                @form-element-input__font-family
    @input-text__font-family
    @select__font-family
    @textarea__font-family
                @font-family__base
    @form-element-input__font-family
    @form-element-input__font-family
    @form-element-input__font-family
                Form control font family

                @_font-weight
                @form-element-input__font-weight
    @input-text__font-weight
    @select__font-weight
    @textarea__font-weight
                false
    @form-element-input__font-weight
    @form-element-input__font-weight
    @form-element-input__font-weight
                Form control font weight

                @_font-style
                @form-element-input__font-style
    @input-text__font-style
    @selectfont-style
    @textarea__font-style
                false
    @form-element-input__font-style
    @form-element-input__font-style
    @form-element-input__font-style
                Form control font style

                @_line-height
                @form-element-input__line-height
    @input-text__line-height
    @select__line-height
    @textarea__line-height
                @line-height__base
    @form-element-input__line-height
    @form-element-input__line-height
    @form-element-input__line-height
                Form control line height

                Placeholder

                @_placeholder-color
                @form-element-input-placeholder__color
    @input-text-placeholder__color
    @select-placeholder__color
    @textarea-placeholder__color
                #c2c2c2
    @form-element-input-placeholder__color
    @form-element-input-placeholder__color
    @form-element-input-placeholder__color
                Form control placeholder color

                @_placeholder-font-style
                @form-element-input-placeholder__font-style
    @inputtext-placeholder-font-style
    @select-placeholder__font-style
    @textarea-placeholder__font-style
                @form-element-input__font-style
    @form-element-input-placeholder__font-style
    @form-element-input-placeholder__font-style
    @form-element-input-placeholder__font-style
                Form control placeholder font style

                Disabled element

                @_disabled-background
                @form-element-input__disabled__background
    @inputtextdisabled-background
    @select__disabled__background
    @textarea__disabled__background
                @form-element-input__background
    @form-element-input__disabled__background
    @form-element-input__disabled__background
    @form-element-input__disabled__background
                Disabled form element background

                @_disabled-border
                @form-element-input__disabled__border
    @input-text__disabled__border
    @select__disabled__border
    @textarea__disabled__border
                @form-element-input__border
    @form-element-input__disabled__border
    @form-element-input__disabled__border
    @form-element-input__disabled__border
                Disabled form element border

                @_disabled-opacity
                @form-element-input__disabled__opacity
    @input-text__disabled__opacity
    @select__disabled__opacity
    @textarea__disabled__opacity
                .5
    @form-element-input__disabled__opacity
    @form-element-input__disabled__opacity
    @form-element-input__disabled__opacity
                Disabled form element opacity

                @_disabled-color
                @form-element-input__disabled__color
    @input-text__disabled__color
    @select__disabled__color
    @textarea__disabled__color
                @form-element-input__color
    @form-element-input__disabled__color
    @form-element-input__disabled__color
    @form-element-input__disabled__color
                Disabled form element text color

                @_disabled-font-style
                @form-element-input__disabled__font-style
    @input-text__disabled__font-style
    @select__disabled__font-style
    @textarea__disabled__font-style
                @form-element-input__font-style
    @form-element-input__disabled__font-style
    @form-element-input__disabled__font-style
    @form-element-input__disabled__font-style
                Disabled form element font style

                Focused elements

                @_focus-background
                @form-element-input__focus__background
    @input-text__focus__background
    @select__focus__background
    @textarea__focus__background
                @form-element-input__background
    @form-element-input__focus__background
    @form-element-input__focus__background
    @form-element-input__focus__background
                Focused form element background

                @_focus-border
                @form-element-input__focus__border
    @input-text__focus__border
    @select__focus__border
    @textarea__focus__border
                @form-element-input__border
    @form-element-input__focus__border
    @form-element-input__focus__border
    @form-element-input__focus__border
                Focused form element border

                @_focus-color
                @form-element-input__focus__color
    @input-text__focus__color
    @select__focus__color
    @textarea__focus__color
                @form-element-input__color
    @form-element-input__focus__color
    @form-element-input__focus__color
    @form-element-input__focus__color
                Focused form element color

                @_focus-font-style
                @form-element-input__focus__font-style
    @input-text__focus__font-style
    @select__focus__font-style
    @textarea__focus__font-style
                @form-element-input__font-style
    @form-element-input__focus__font-style
    @form-element-input__focus__font-style
    @form-element-input__focus__font-style
                Focused form element font style

#### The `.lib-form-element-choise()` mixin variables

                Mixin variable
                Global variable
                Default values [Allowable values]
                Comment

                @_type
                @form-element-choice__type
                '' ['' | radio | checkbox]
                Choice element type

                @_vertical-align
                @form-element-choice__vertical-align
    @input-radio__vertical-align
    @input-checkbox__vertical-align
                false
    @form-element-choice__vertical-align
    @form-element-choice__vertical-align
                Choice element vertical align

                @_margin
                @form-element-choice__margin
    @input-radio__margin
    @input-checkbox__margin
                2px @indent__xs 0 0
    @form-element-choice__margin
    @form-element-choice__margin
                Choice element margin

                @_disabled-opacity
                @form-element-choice__disabled__opacity
    @input-radio__disabled__opacity
    @input-checkbox__disabled__opacity
                @form-element-input__disabled__opacity
    @form-element-choice__disabled__opacity
    @form-element-choice__disabled__opacity
                Disabled choice element opacity

#### The `.lib-form-validation-note()` mixin variables

                Mixin variable
                Global variable
                Default values [Allowable values]
                Comment

                @_note-color
                @form-validation-note__color-error
                @error__color
                Validation note text color

                @_note-font-size
                @form-validation-note__font-size
                @font-size__s
                Validation note font size

                @_note-font-family
                @form-validation-note__font-family
                false
                Validation note font family

                @_note-font-style
                @form-validation-note__font-style
                false
                Validation note font style

                @_note-font-weight
                @form-validation-note__font-weight
                false
                Validation note font weight

                @_note-line-height
                @form-validation-note__line-height
                false
                Validation note line height

                @_note-margin
                @form-validation-note__margin
                3px 0 0
                Validation note margin

                @_note-padding
                @form-validation-note__padding
                false
                Validation note padding

                @_note-icon-use
                @form-validation-note-icon__use
                false [true | false]
                Show validation note icon

                @_note-icon-font-content
                @form-validation-note-icon__font-content
                @icon-pointer-up
                Validation note icon code

                @_note-icon-font
                @form-validation-note-icon__font
                @icon-font
                Validation note icon font

                @_note-icon-font-size
                @form-validation-note-icon__font-size
                @form-validation-note__font-size * 2
                Validation note icon font size

                @_note-icon-font-line-height
                @form-validation-note-icon__font-line-height
                @form-validation-note__font-size
                Validation note icon line height

                @_note-icon-font-color
                @form-validation-note-icon__font-color
                @form-validation-note__color-error
                Validation note icon color

                @_note-icon-font-color-hover
                @form-validation-note-icon__font-color-hover
                false
                Hovered validation note icon color

                @_note-icon-font-color-active
                @form-validation-note-icon__font-color-active
                false
                Active validation note icon color

                @_note-icon-font-margin
                @form-validation-note-icon__font-margin
                false
                Validation note icon margin

                @_note-icon-font-vertical-align
                @form-validation-note-icon__font-vertical-align
                @icon-font__vertical-align
                Validation note icon vertical align

                @_note-icon-font-position
                @form-validation-note-icon__font-position
                @icon-font__position
                Validation note icon position

                @_note-icon-font-text-hide
                @form-validation-note-icon__font-text-hide
                @icon-font__text-hide
                Validation note icon text hide

## Font icon variables

#### The `.lib-icon-font()` mixin variables

            Mixin variable
            Default value
            Allowed values
            Comment

            @_icon-font-content

            '' | icon code | icon variables
            Font icon code

            @_icon-font
            @icons__font-name
            '' | false | value
            The icon font

            @_icon-font-size
            inherit
            '' | false | value
            Font icon size

            @_icon-font-line-height
            @icon-font__size
            '' | false | value
            Font icon line height

            @_icon-font-color
            inherit
            '' | inherit | color code
            Font icon color

            @_icon-font-color-hover
            false
            '' | inherit | color code
            Font icon color - hover state

            @_icon-font-color-active
            false
            '' | inherit | color code
            Font icon color - active state

            @_icon-font-margin
            @icon__margin
            '' | false | value
            Font icon margin

            @_icon-font-vertical-align
            @icon__vertical-align
            '' | false | value
            Font icon vertical align

            @_icon-font-position
            @icon__position
            before | after
            Font icon position

            @_icon-font-text-hide
            @icon__text-hide
            true | false
            The text of the element is replaced with the icon(true), or the icon is on the side of the text (false)

            @_icon-font-display
            inline-block
            '' | false | value
            The 'display' property of the icon container

## Icon with image or sprite variables

#### The `.lib-icon-image()` mixin variables

            Mixin variable
            Default value
            Allowed values
            Comment

            @_icon-image
            -
            '' | false | value
            A link to an image or sprite, mandatory parameter

            @_icon-image-height
            26px
            '' | false | value
            Icon image height

            @_icon-image-width
            26px
            '' | false | value
            Icon image width

            @_icon-image-margin
            0
            '' | false | value
            Icon image margin

            @_icon-image-vertical-align
            middle
            '' | false | value
            Icon image vertical align

            @_icon-image-position-x
            0
            '' | false | value
            Horizontal image position

            @_icon-image-position-y
            0
            '' | false | value
            Vertical image position

            @_icon-image-position
            before
            before | after
            Icon image position

            @_icon-image-text-hide
            false
            true | false
            The text in the <span> tag should be hidden

## Icon position for an icon with image or sprite variables

#### The `.lib-icon-image-position()` mixin variables

            Mixin variable
            Default value
            Allowed values
            Comment

            @_icon-image-position-x
            0
            '' | false | value
            Horizontal starting position of icon image

            @_icon-image-position-y
            0
            '' | false | value
            Vertical starting position of icon image

            @_icon-image-position
            -
            before | after
            Position of the icon which is set for the element

## Icon sprite position variables

#### The `.lib-icon-sprite-position()` mixin variables

            Mixin variable
            Default value
            Allowed values
            Comment

            @_icon-sprite-position-x
            0
            '' | false | value
            The x coordinate of the desired image on the grid

            @_icon-sprite-position-y
            0
            '' | false | value
            The y coordinate of the desired image on the grid

            @_icon-sprite-grid
            26px
            '' | false | value
            The size of the grid (in pixels) that the individal images are placed on

            @_icon-sprite-position
            before
            before | after
            Icon image position

## Image/sprite icon size variables

#### The `.lib-icon-image-size()` mixin variables

            Mixin variable
            Default value
            Allowed values
            Comment

            @_icon-image-width
            26px
            '' | false | value
            Icon image width

            @_icon-image-height
            26px
            '' | false | value
            Icon image height

            @_icon-image-position
            before
            before | after
            Icon image position

## Layout variables

                Variables list names
                Default value
                Allowable values
                Comment

                @layout__width
                ''
                '' | false | value
                Page minimum width

                @layout__max-width
                1280px
                '' | false | value
                Page maximum width

                @layout-indent__width
                20px
                '' | false | value
                Page indents on the left and right

                Class names defining different layouts

                @layout-class-1column
                page-layout-1column
                '' | false | page-layout-1column | page-layout-2columns-left | page-layout-2columns-right | page-layout-3columns
                Class name for one column layout

                @layout-class-2columns__left
                page-layout-2columns-left
                '' | false | page-layout-1column | page-layout-2columns-left | page-layout-2columns-right | page-layout-3columns
                Class name for two columns layout with left sidebar

                @layout-class-2columns__right
                page-layout-2columns-right
                '' | false | page-layout-1column | page-layout-2columns-left | page-layout-2columns-right | page-layout-3columns
                Class name for two columns layout with right sidebar

                @layout-class-3columns
                page-layout-3columns
                '' | false | page-layout-1column | page-layout-2columns-left | page-layout-2columns-right | page-layout-3columns
                Class name for three columns layout with left sidebar

                Variables used for layout grid

                @total-columns
                12
                '' | false | value
                Number of total columns in layout (i.e. 1, 2, 3)

                @gutter-width
                0
                '' | false | value
                Distanse between columns

                Variables for layout columns

                @layout-column__width
                @total-columns
                '' | false | value
                Sets base columns number

                @layout-column__sidebar-width
                2
                '' | false | value
                Sets sidebar width

                @layout-column__left-width
                @layout-column__sidebar-width
                '' | false | value
                Sets left column width

                @layout-column__right-width
                @layout-column__sidebar-width
                '' | false | value
                Sets right column width

                Variables for layout columns depending on layout used

                @layout-column-main__width-1
                100%
                '' | false | value
                Sets one column width

                @layout-column-main__width-2-left
                @layout-column__width - @layout-column__left-width
                '' | false | value
                Sets left column width

                @layout-column-main__width-2-right
                @layout-column__width - @layout-column__right-width
                '' | false | value
                Sets right column width

                @layout-column-main__width-3
                @layout-column__width - @layout-column__left-width - @layout-column__right-width
                '' | false | value
                Sets three columns layout main column width

                Settings variables

                @use-flex
                true
                '' | true | false
                Sets compatibility for browsers not supporting flex

                @responsive
                true
                '' | true | false
                Is set to true if theme has responsive layout

## Loader variables

#### The `.lib-loader()` mixin variables

            Mixin variable
            Default value
            Allowable values
            Comment

            @_loader-overlay-background-color
            rgba(255, 255, 255, .5)
            '' | false | value
            Loader overlay background color

            @_loader-overlay-z-index
            9999
            '' | false | value
            Loader overlay background z-index

            @_loader-icon-width
            160px
            '' | false | value
            Loader icon width

            @_loader-icon-height
            160px
            '' | false | value
            Loader icon height

            @_loader-icon-background-color
            transparent
            '' | false | value
            Loader icon background color

            @_loader-icon-background-image
            url('@{baseDir}images/loader-2.gif')
            '' | false | value
            Loader icon ackground image

            @_loader-icon-background-position
            50% 50%
            '' | false | value
            Loader icon background position

            @_loader-icon-border-radius
            5px
            '' | false | value
            Loader icon border radius

            @_loader-icon-padding
            ''
            '' | false | value
            Loader icon icon padding

            @_loader-text
            false
            '' | false | value
            Loader text presence

            @_loader-text-color
            @primary__color
            '' | false | value
            Loader text color

            @_loader-text-font-size
            @font-size__base
            '' | false | value
            Loader text font size

            @_loader-text-font-family
            @font-family__base
            '' | false | value
            Loader text font family

            @_loader-text-font-weight
            @font-weight__regular
            '' | false | value
            Loader text font weight

            @_loader-text-font-style
            @font-style__base
            '' | false | value
            Loader text font style

            @_loader-text-padding
            130px 0 0
            '' | false | value
            Loader text padding

## Loading variables

#### The `.lib-loading()` mixin variables

            Mixin variable
            Default value
            Comment

            @_loading-background-color
            @loader-overlay__background-color
            Loading overlay background color

            @_loading-background-image
            @loader-icon__background-image
            Loading overlay background z-index

## Messages variables

#### The `.lib-message()` mixin variables

                Mixin variable
                Default value
                Allowed values
                Comment

                @message__padding
                @indent__s @indent__base
                '' | value
                Message padding

                @message__margin
                @indent__xs 0
                '' | value
                Message margin

                @message__color
                false
                true | false
                Each message type has its own message color

                Messages font style

                @message__font-size
                13px
                '' | false | value
                Message font size

                @message__font-family
                false
                '' | false | value
                Message font family

                @message__font-style
                false
                '' | false | value
                Message font style

                @message__font-weight
                false
                '' | false | value
                Message font weight

                @message__line-height
                1.2em
                '' | false | value
                Message line height

                Message icon setup

                @message-icon__font-size
                ceil(@message__font-size * 2 + 2)
                '' | false | value
                Message icon font size

                @message-icon__font-line-height
                @message-icon__font-size
                '' | false | value
                Message icon line height

                @message-icon__inner-padding-left
                40px
                '' | false | value
                Message icon padding left

                @message-icon__lateral-width
                30px
                '' | false | value
                Message icon lateral width

                @message-icon__lateral-arrow-size
                5px
                '' | false | value
                Message icon arrow size

                @message-icon__top
                18px
                '' | false | value
                Message icon top position

                @message-icon__right
                false
                '' | false | value
                Message icon right position

                @message-icon__bottom
                false
                '' | false | value
                Message icon bottom position

                @message-icon__left
                0
                '' | false | value
                Message icon left position

                Message border

                @message__border-width
                false
                '' | false | value
                Message border width

                @message__border-color
                false
                '' | false | value
                Message border color

                @message__border-style
                false
                '' | false | value
                Message border style

                @message__border-radius
                false
                '' | false | value
                Message border radius

                Information message

                @message-info__color
                #6f4400
                '' | false | value
                Information message text color

                @message-info__background
                #fdf0d5
                '' | false | value
                Information message background

                @message-info-link__color
                @link__color
                '' | false | value
                Information message link color

                @message-info-link__color-hover
                @link__hover__color
                '' | false | value
                Information message hovered link color

                @message-info-link__color-active
                @link__hover__color
                '' | false | value
                Information message active link color

                @message-info__border-color
                @message__border-color
                '' | false | value
                Information message border color

                @message-info-icon
                @icon-warning
                '' | false | value
                Information message icon symbol code

                @message-info-icon__color-inner
                #c07600
                '' | false | value
                Information message icon symbol color

                @message-info-icon__color-lateral
                @color-white
                '' | false | value
                Information message lateral icon symbol color

                @message-info-icon__background
                #6f4400
                '' | false | value
                Information message icon background

                @message-info-icon__top
                @message-icon__top
                '' | false | value
                Message icon top position

                @message-info-icon__right
                @message-icon__right
                '' | false | value
                Message icon right position

                @message-info-icon__bottom
                @message-icon__bottom
                '' | false | value
                Message icon bottom position

                @message-info-icon__left
                @message-icon__left
                '' | false | value
                Message icon left position

                Warning message

                @message-warning__color
                @message-info__color
                '' | false | value
                Warning message text color

                @message-warning__background
                @message-info__background
                '' | false | value
                Warning message background

                @message-warning-link__color
                @message-info-link__color
                '' | false | value
                Warning message link color

                @message-warning-link__color-hover
                @message-info-link__color-hover
                '' | false | value
                Warning message hovered link color

                @message-warning-link__color-active
                @message-info-link__color-active
                '' | false | value
                Warning message active link color

                @message-info__border-color
                @message-info__border-color
                '' | false | value
                Warning message border color

                @message-warning-icon
                @message-info-icon
                '' | false | value
                Warning message icon symbol code

                @message-warning-icon__color-inner
                @message-info-icon__color-inner
                '' | false | value
                Warning message icon symbol color

                @message-warning-icon__color-lateral
                @message-info-icon__color-lateral
                '' | false | value
                Warning message lateral icon symbol color

                @message-warning-icon__background
                @message-info-icon__background
                '' | false | value
                Warning message icon background

                @message-warning-icon__top
                @message-icon__top
                '' | false | value
                Message icon top position

                @message-warning-icon__right
                @message-icon__right
                '' | false | value
                Message icon right position

                @message-warning-icon__bottom
                @message-icon__bottom
                '' | false | value
                Message icon bottom position

                @message-warning-icon__left
                @message-icon__left
                '' | false | value
                Message icon left position

                Error message

                @message-error__color
                @error__color
                '' | false | value
                Error message text color

                @message-error__background
                #fae5e5
                '' | false | value
                Error message background

                @message-error-link__color
                @link__color
                '' | false | value
                Error message link color

                @message-error-link__color-hover
                @link__hover__color
                '' | false | value
                Error message hovered link color

                @message-error-link__color-active
                @link__hover__color
                '' | false | value
                Error message active link color

                @message-error__border-color
                @message__border-color
                '' | false | value
                Error message border color

                @message-error-icon
                @icon-warning
                '' | false | value
                Error message icon symbol code

                @message-error-icon__color-inner
                #b30000
                '' | false | value
                Error message icon symbol color

                @message-error-icon__color-lateral
                @color-white
                '' | false | value
                Error message lateral icon symbol color

                @message-error-icon__background
                #b30000
                '' | false | value
                Error message icon background

                @message-error-icon__top
                @message-icon__top
                '' | false | value
                Message icon top position

                @message-error-icon__right
                @message-icon__right
                '' | false | value
                Message icon right position

                @message-error-icon__bottom
                @message-icon__bottom
                '' | false | value
                Message icon bottom position

                @message-error-icon__left
                @message-icon__left
                '' | false | value
                Message icon left position

                Success message

                @message-success__color
                #006400
                '' | false | value
                Success message text color

                @message-success__background
                #e5efe5
                '' | false | value
                Success message background

                @message-success-link__color
                @link__color
                '' | false | value
                Success message link color

                @message-success-link__color-hover
                @link__hover__color
                '' | false | value
                Success message hovered link color

                @message-success-link__color-active
                @link__hover__color
                '' | false | value
                Success message active link color

                @message-success__border-color
                @message__border-color
                '' | false | value
                Success message border color

                @message-success-icon
                @icon-checkmark
                '' | false | value
                Success message icon symbol code

                @message-success-icon__color-inner
                #006400
                '' | false | value
                Success message icon symbol color

                @message-success-icon__color-lateral
                @color-white
                '' | false | value
                Success message lateral icon symbol color

                @message-success-icon__background
                #006400
                '' | false | value
                Success message icon background

                @message-success-icon__top
                @message-icon__top
                '' | false | value
                Message icon top position

                @message-success-icon__right
                @message-icon__right
                '' | false | value
                Message icon right position

                @message-success-icon__bottom
                @message-icon__bottom
                '' | false | value
                Message icon bottom position

                @message-success-icon__left
                @message-icon__left
                '' | false | value
                Message icon left position

                Notice message

                @message-notice__color
                @message-info__color
                '' | false | value
                Notice message text color

                @message-notice__background
                @message-info__background
                '' | false | value
                Notice message background

                @message-notice-link__color
                @message-info-link__color
                '' | false | value
                Notice message link color

                @message-notice-link__color-hover
                @message-info-link__color-hover
                '' | false | value
                Notice message hovered link color

                @message-notice-link__color-active
                @message-info-link__color-active
                '' | false | value
                Notice message active link color

                @message-notice__border-color
                @message-info__border-color
                '' | false | value
                Notice message border color

                @message-notice-icon
                @message-info-icon
                '' | false | value
                Notice message icon symbol code

                @message-notice-icon__color-inner
                @message-info-icon__color-inner
                '' | false | value
                Notice message icon symbol color

                @message-notice-icon__color-lateral
                @message-info-icon__color-lateral
                '' | false | value
                Notice message lateral icon symbol color

                @message-notice-icon__background
                @message-info-icon__background
                '' | false | value
                Notice message icon background

                @message-notice-icon__top
                @message-icon__top
                '' | false | value
                Message icon top position

                @message-notice-icon__right
                @message-icon__right
                '' | false | value
                Message icon right position

                @message-notice-icon__bottom
                @message-icon__bottom
                '' | false | value
                Message icon bottom position

                @message-notice-icon__left
                @message-icon__left
                '' | false | value
                Message icon left position

## Pagination variables

#### The `.lib-pager()` mixin variables

                Mixin variable
                Default value
                Allowed values
                Comment

                @_pager-label-display
                none
                none | block | inline-block
                The 'page' label is displayed

                @_pager-item-display
                inline-block
                none | block | inline-block
                The pager item label is displayed

                @_pager-reset-spaces
                true
                true | false
                Reset spaces between inline-block elements if elements 'display' is set to 'inline-block'

                @_pager-font-size
                @font-size__s
                '' | false | value
                Pager font size

                @_pager-font-weight
                @font-weight__bold
                '' | false | value
                Pager font weight

                @_pager-line-height
                32px
                '' | false | value
                Pager line height

                @_pager-item-margin
                0 2px 0 0
                '' | false | value
                Pager item margin

                @_pager-item-padding
                0 4px
                '' | false | value
                Pager item padding

                @_pager-actions-padding
                0
                '' | false | value
                Pager actions padding

                Pager current page

                @_pager-current-font-weight
                @font-weight__bold;
                '' | false | value
                Current page number font weight

                @_pager-current-color
                @primary__color
                '' | false | value
                Current page number color

                @_pager-current-border
                false
                '' | false | value
                Current page number border

                @_pager-current-background
                false
                '' | false | value
                Current page number background

                @_pager-current-gradient
                false
                true | false
                Current page number has gradient background

                @_pager-current-gradient-direction
                false
                '' | false | vertical | horizontal
                Direction of current page number background gradient (if there is any)

                @_pager-current-gradient-color-start
                false
                '' | false | value
                Current page number gradient start color

                @_pager-current-gradient-color-end
                false
                '' | false | value
                Current page number gradient end color

                Link to page number

                @_pager-gradient
                false
                true | false
                Pager items have gradient background

                @_pager-gradient-direction
                'false
                '' | false | vertical | horizontal
                Direction of background gradient (if there is any) of pager item

                Link to page number - default

                @_pager-color
                @link__color
                '' | false | value
                Pager item color

                @_pager-border
                false
                '' | false | value
                Pager item border

                @_pager-text-decoration
                none
                '' | false | value
                Pager item text decoration

                @_pager-background
                false
                '' | false | value
                Pager item background

                @_pager-gradient-color-start
                false
                '' | false | value
                Pager item gradient start color

                @_pager-gradient-color-end
                false
                '' | false | value
                Pager item gradient end color

                Link to page number - visited

                @_pager-color-visited
                @link__visited__color
                '' | false | value
                Pager item visited color

                @_pager-border-visited
                false
                '' | false | value
                Pager item visited border

                @_pager-background-visited
                false
                '' | false | value
                Pager item visited background

                @_pager-gradient-color-start-visited
                false
                '' | false | value
                Pager item visited gradient start color

                @_pager-gradient-color-end-visited
                false
                '' | false | value
                Pager item visited gradient end color

                Link to page number - hover

                @_pager-color-hover
                @link__hover__color

                Pager item hover color

                @_pager-border-hover
                false
                '' | false | value
                Pager item hover border

                @_pager-text-decoration-hover
                none
                '' | false | value
                Pager item hover text decoration

                @_pager-background-hover
                false
                '' | false | value
                Pager item hover background

                @_pager-gradient-color-start-hover
                false
                '' | false | value
                Pager item hover gradient start color

                @_pager-gradient-color-end-hover
                false
                '' | false | value
                Pager item hover gradient end color

                Link to page number - active

                @_pager-color-active
                @link__hover__color
                '' | false | value
                Pager item active color

                @_pager-border-active
                false
                '' | false | value
                Pager item active border

                @_pager-background-active
                false
                '' | false | value
                Pager item active background

                @_pager-gradient-color-start-active
                false
                '' | false | value
                Pager item active  gradient start color

                @_pager-gradient-color-end-active
                false
                '' | false | value
                Pager item active  gradient end color

                Previous/next action links - icons

                @_pager-icon-use
                true
                true | false
                previous/next links have icons

                @_pager-icon-previous-content
                @icon-prev
                '' | false | value
                "previous" link icon

                @_pager-icon-next-content
                @icon-next
                '' | false | value
                "next" link icon

                @_pager-icon-text-hide
                true
                true | false
                The "previous" and "next" words are hidden

                @_pager-icon-position
                before
                before | after
                Icon position

                @_pager-icon-font
                @icon-font
                '' | false | value
                Icon font

                @_pager-icon-font-margin
                0 0 0 -6px
                '' | false | value
                Icon font margin

                @_pager-icon-font-vertical-align
                top
                '' | false | value
                Icon font vertical align

                @_pager-icon-font-size
                46px
                '' | false | value
                Icon font size

                @_pager-icon-font-line-height
                @icon-font__line-height
                '' | false | value
                Icon font line height

                Previous/next action links

                @_pager-action-gradient
                false
                true | false
                Previous/next links have gradient background

                @_pager-action-gradient-direction
                false
                '' | false | vertical | horizontal
                Direction of background gradient (if there is any) of previous/next links

                Previous/next action links - default

                @_pager-action-color
                @text__color__muted
                '' | false | value
                Pager action color

                @_pager-action-border
                @border-width__base solid @border-color__base
                '' | false | value
                Pager action border

                @_pager-action-text-decoration
                @pager__text-decoration
                '' | false | value
                Pager action text decoration

                @_pager-action-background
                @pager__background
                '' | false | value
                Pager action background

                @_pager-action-gradient-color-start
                flase
                '' | false | value
                Pager action gradient start color

                @_pager-action-gradient-color-end
                flase
                '' | false | value
                Pager action gradient end color

                Previous/next action links - visited

                @_pager-action-color-visited
                @pager-action__color
                '' | false | value
                Pager action visited color

                @_pager-action-border-visited
                flase
                '' | false | value
                Pager action visited border

                @_pager-action-background-visited
                flase
                '' | false | value
                Pager action visited background

                @_pager-action-gradient-color-start-visited
                flase
                '' | false | value
                Pager action visited gradient start color

                @_pager-action-gradient-color-end-visited
                flase
                '' | false | value
                Pager action visited gradient end color

                Previous/next action links - hover

                @_pager-action-color-hover
                @pager-action__color
                '' | false | value
                Pager action hover color

                @_pager-action-border-hover
                flase
                '' | false | value
                Pager action hover border

                @_pager-action-text-decoration-hover
                @pager__hover__text-decoration
                '' | false | value
                Pager action hover text decoration

                @_pager-action-background-hover
                flase
                '' | false | value
                Pager action hover background

                @_pager-action-gradient-color-start-hover
                flase
                '' | false | value
                Pager action hover gradient start color

                @_pager-action-gradient-color-end-hover
                flase
                '' | false | value
                Pager action hover gradient end color

                Previous/next action links - active

                @_pager-action-color-active
                @pager-action__color
                '' | false | value
                Pager action active color

                @_pager-action-border-active
                flase
                '' | false | value
                Pager action active border

                @_pager-action-background-active
                flase
                '' | false | value
                Pager action active background

                @_pager-action-gradient-color-start-active
                flase
                '' | false | value
                Pager action active gradient start color

                @_pager-action-gradient-color-end-active
                flase
                '' | false | value
                Pager action active gradient end color

## Popup variables

#### The `.lib-popup()` mixin variables

            Mixin variable
            Default value
            Allowable values
            Comment

            @_popup-width
            auto
            '' | false | value
            Popup width

            @_popup-height
            auto
            '' | false | value
            Popup height

            @_popup-padding
            22px
            '' | false | value
            Inner popup padding

            @_popup-background
            @color-white
            '' | false | value
            Popup background

            @_popup-border
            1px solid #aeaeae
            '' | false | value
            Popup border

            @_popup-shadow
            0 3px 3px rgba(0,0,0,.15)
            '' | false | none | value
            Popup shadow

            @_popup-fade
            opacity .3s linear
            '' | false | value
            Popup overlay opacity

            @_popup-z-index
            1001
            '' | false | value
            Popup z-index

            Popup position

            @_popup-position
            fixed
            '' | false | value
            Popup position

            @_popup-position-top
            0
            '' | false | value
            Popup top

            @_popup-position-right
            0
            '' | false | value
            Popup right

            @_popup-position-bottom
            0
            '' | false | value
            Popup bottom

            @_popup-position-left
            0
            '' | false | value
            Popup left

            Popup margin

            @_popup-margin-top
            false
            '' | false | value
            Popup top margin

            @_popup-margin-right
            false
            '' | false | value
            Popup right margin

            @_popup-margin-bottom
            false
            '' | false | value
            Popup bottom margin

            @_popup-margin-left
            false
            '' | false | value
            Popup left margin

            @_popup-content-height
            auto
            '' | false | value
            Popup content height

            @_popup-header-margin
            0 0 25px
            '' | false | value
            Popup header margin

            @_popup-content-margin
            false
            '' | false | value
            Popup content margin

            @_popup-footer-margin
            false
            '' | false | value
            Popup footer margin

            @_popup-title-headings
            true
            true | false
            Popup title has the same style as one of page headings

            @_popup-title-headings-level
            h3
            h1 | h2 | h3 | h4 | h5 | h6
            What heading style is applyed to the popup title

            Popup close button

            @_popup-button-close-icon
            true
            true | false
            Popup close button has an icon

            @_popup-button-close-reset
            true
            true | false
            Reset popup close button default styles

            @_popup-button-close-position
            absolute
            '' | false | value
            Popup button close position

            @_popup-button-close-position-top
            10px
            '' | false | value
            Popup button close top position

            @_popup-button-close-position-right
            10px
            '' | false | value
            Popup button close right position

            @_popup-button-close-position-bottom
            ''
            '' | false | value
            Popup button close bottom position

            @_popup-button-close-position-left
            ''
            '' | false | value
            Popup button close left position

            Popup icons parameters

            @_popup-icon-font-content
            @icon-remove
            '' | false | value
            Popup icon code

            @_popup-icon-font
            @button-icon__font
            '' | false | value
            Popup icon font

            @_popup-icon-font-size
            @button-icon__font-size
            '' | false | value
            Popup icon font size

            @_popup-icon-font-line-height
            @button-icon__line-height
            '' | false | value
            Popup icon line height

            @_popup-icon-font-color
            @button-icon__color
            '' | false | value
            Popup icon color

            @_popup-icon-font-color-hover
            @button-icon__hover__font-color
            '' | false | value
            Hovered popup icon color

            @_popup-icon-font-color-active
            @popup-icon-font__color-active
            '' | false | value
            Active popup icon color

            @_popup-icon-font-margin
            @button-icon__margin
            '' | false | value
            Popup icon  margin

            @_popup-icon-font-vertical-align
            @button-icon__vertical-align
            '' | false | value
            Popup icon vertical align

            @_popup-icon-font-position
            @button-icon__position
            '' | false | value
            Popup icon position

            @_popup-icon-font-text-hide
            true
            true | false
            Popup icon hide text

            Actions toolbar parameters

            @_popup-actions-toolbar
            false
            true | false
            Actions toolbar is displayed

            @_popup-actions-toolbar-actions-position
            @actions-toolbar-actions__position
            justify | left | right | center
            Actions toolbar position

            @_popup-actions-toolbar-actions-reverse
            @actions-toolbar-actions__reverse
            true | false
            Actions toolbar reverse

            @_popup-actions-toolbar-margin
            @actions-toolbar__margin
            '' | false | value
            Actions toolbar margin

            @_popup-actions-toolbar-padding
            @actions-toolbar__padding
            '' | false | value
            Actions toolbar padding

            @_popup-actions-toolbar-actions-margin
            @actions-toolbar-actions__margin
            '' | false | value
            Actions toolbar actions margin

            @_popup-actions-toolbar-primary-actions-margin
            @actions-toolbar-actions-primary__margin
            '' | false | value
            Actions toolbar primary actions margin

            @_popup-actions-toolbar-secondary-actions-margin
            @actions-toolbar-actions-secondary__margin
            '' | false | value
            Actions toolbar secondary actions margin

            @_popup-actions-toolbar-actions-links-margin-top
            @actions-toolbar-actions-links__margin-top
            '' | false | value
            Actions toolbar links top margin

            @_popup-actions-toolbar-primary-actions-links-margin-top
            @actions-toolbar-actions-links-primary__margin-top
            '' | false | value
            Actions toolbar primary actions links top margin

            @_popup-actions-toolbar-secondary-links-margin-top
            @actions-toolbar-actions-links-secondary__margin-top
            '' | false | value
            Actions toolbar secondary links top margin

## Window overlay variables

            Mixin variable
            Default value
            Allowable values
            Comment

            @_overlay-background
            #000
            '' | false | value
            Overlay background color

            @_overlay-opacity
            .5
            '' | false | value
            Overlay opacity

            @_overlay-opacity-old
            50
            '' | false | value
            Overlay opacity for old browsers

            @_overlay-fade
            opacity .15s linear
            '' | false | value
            Overlay fade

            @_overlay-z-index
            1000
            '' | value
            Overlay z-index

## Rating variables

#### The `.lib-rating-vote()` and `.lib-rating-summary()` mixin variables

                Mixin variable
                Default value
                Allowed values
                Comment

                @_icon-content
                @icon-star
                '' | false | icon code
                Rating icon symbol code

                @_icon-count
                5
                '' | value
                Number of rating icon symbols

                @_icon-font
                @icon-font
                '' | false | value
                Icon font

                @_icon-font-size
                28px
                '' | false | value
                Icon font size

                @_icon-letter-spacing
                -10px
                '' | false | value
                Icon letter spacing

                @_icon-color
                #c7c7c7
                '' | false | value
                Unselected icons color

                @_icon-color-active
                #ff5601
                '' | false | value
                Selected and hovered icons color

                @_label-hide
                false
                true | false
                Rating label is displayed

## Tabs variables

#### The `.lib-data-tabs()` mixin variables

                Mixin variable
                Default value
                Allowed values
                Comment

                @_tab-control-font-family
                false
                '' | false | value
                Tabs font family

                @_tab-control-font-size
                @font-size__base
                '' | false | value
                Tabs font size

                @_tab-control-font-weight
                @font-weight__semibold
                '' | false | value
                Tabs font weight

                @_tab-control-font-style
                false
                '' | false | value
                Tabs font style

                @_tab-control-line-height
                @tab-control__height
                '' | false | value
                Tabs line height

                Tabs controls settings

                @_tab-control-background-color
                @panel__background-color
                '' | false | value
                Current tab background

                @_tab-control-color
                @link__color
                '' | false | value
                Current tab text color

                @_tab-control-text-decoration
                none
                '' | false | value
                Current tab text-decoration

                @_tab-control-background-color-hover
                lighten(@tab-control__background-color, 5%)
                '' | false | value
                Hovered tab background

                @_tab-control-color-hover
                @tab-control__color
                '' | false | value
                Hovered tab text color

                @_tab-control-text-decoration-hover
                @tab-control__text-decoration
                '' | false | value
                Hovered tab text-decoration

                @_tab-control-background-color-active
                lighten(@tab-control__background-color, 15%)
                '' | false | value
                Active tab background

                @_tab-control-color-active
                @text__color
                '' | false | value
                Active tab text color

                @_tab-control-text-decoration-active
                @tab-control__text-decoration
                '' | false | value
                Active tab text-decoration

                @_tab-control-height
                @indent__l
                '' | false | value
                Height of tab control

                @_tab-control-margin-right
                @indent__xs
                '' | false | value
                Right margin of tab title block

                @_tab-control-padding-top
                @indent__xs
                '' | false | value
                Tab control padding top

                @_tab-control-padding-right
                @indent__base
                '' | false | value
                Tab control padding right

                @_tab-control-padding-bottom
                @tab-control__padding-bottom
                '' | false | value
                Tab control padding bottom

                @_tab-control-padding-left
                @tab-control__padding-left
                '' | false | value
                Tab control padding left

                Tab content settings

                @_tab-content-background-color
                @tab-control__active__background-color
                '' | false | value
                Tab content background

                @_tab-content-border-top-status
                false
                true | false
                Tab content border top status. When set to 'true' the content has only top border. When set to 'false' the content has all 4 borders

                @_tab-content-border
                @tab-control__border-width solid @tab-control__border-color
                '' | false | value
                Tab content border

                @_tab-content-margin-top
                @tab-control__height + @tab-control__border-width + @tab-control__padding-top + @tab-control__padding-bottom
                '' | false | value
                Tab content top margin (it is the sum of tabs height and top border width)

                @_tab-content-padding-top
                @indent__base
                '' | false | value
                Tab content padding

                @_tab-content-padding-right
                @indent__base
                '' | false | value
                Tab content padding

                @_tab-content-padding-bottom
                @tab-content__padding-top
                '' | false | value
                Tab content padding

                @_tab-content-padding-left
                @tab-content__padding-right
                '' | false | value
                Tab content padding

## Accordion variables

#### The `.lib-data-accordion()` mixin variables

                Mixin variable
                Default value
                Allowed values
                Comment

                @_accordion-control-font-family
                @tab-control__font-family
                '' | false | value
                Accordion font family

                @_accordion-control-font-size
                @font-size__l
                '' | false | value
                Accordion font size

                @_accordion-control-font-style
                @tab-control__font-style
                '' | false | value
                Accordion font style

                @_accordion-control-font-weight
                @tab-control__font-weight
                '' | false | value
                Accordion font weight

                @_accordion-control-line-height
                @accordion-control__height
                '' | false | value
                Accordion line height

                Accordion tabs controls settings

                @_accordion-control-border-top
                @tab-control__border-width solid @tab-control__border-color
                '' | false | value
                Accordion control border

                @_accordion-control-border-right
                @tab-control__border-width solid @tab-control__border-color
                '' | false | value
                Accordion control border

                @_accordion-control-border-bottom
                @tab-control__border-width solid @tab-control__border-color
                '' | false | value
                Accordion control border

                @_accordion-control-border-left
                @tab-control__border-width solid @tab-control__border-color
                '' | false | value
                Accordion control border

                @_accordion-control-background-color
                @tab-control__background-color
                '' | false | value
                Accordion control background

                @_accordion-control-color
                @tab-control__color
                '' | false | value
                Accordion control color

                @_accordion-control-text-decoration
                @tab-control__text-decoration
                '' | false | value
                Accordion control text decoration

                @_accordion-control-color-visited
                @accordion-control__color
                '' | false | value
                Accordion control visited link color

                @_accordion-control-text-decoration-visited
                @accordion-control__text-decoration
                '' | false | value
                Accordion control visited link text-decoration

                @_accordion-control-background-color-hover
                @tab-control__hover__background-color
                '' | false | value
                Hovered accordion control background

                @_accordion-control-color-hover
                @tab-control__hover__color
                '' | false | value
                Hovered accordion control text color

                @_accordion-control-text-decoration-hover
                @tab-control__hover__text-decoration
                '' | false | value
                Hovered accordion control text-decoration

                @_accordion-control-background-color-active
                @tab-control__active__background-color
                '' | false | value
                Active accordion control background

                @_accordion-control-color-active
                @tab-control__active__color
                '' | false | value
                Active accordion control text color

                @_accordion-control-text-decoration-active
                @tab-control__active__text-decoration
                '' | false | value
                Active accordion control text-decoration

                @_accordion-control-height
                @indent__xl
                '' | false | value
                Height of accordion control

                @_accordion-control-margin-bottom
                @indent__xs
                '' | false | value
                Bottom margin of the accordion control

                @_accordion-control-padding-top
                @tab-control__padding-top
                '' | false | value
                Accordion tab control padding top

                @_accordion-control-padding-right
                @indent__base
                '' | false | value
                Accordion tab control padding right

                @_accordion-control-padding-bottom
                @tab-control__padding-bottom
                '' | false | value
                Accordion tab control padding bottom

                @_accordion-control-padding-left
                @accordion-control__padding-right
                '' | false | value
                Accordion tab control padding left

                Accordion content settings

                @_accordion-content-background-color
                @tab-control__active__background-color
                '' | false | value
                Accordion tab content background

                @_accordion-content-border
                @tab-content__border
                '' | false | value
                Accordion tab content border

                @_accordion-content-margin
                0 0 @indent__xs
                '' | false | value
                Accordion tab content margin

                @_accordion-content-padding
                @tab-content__padding-top @tab-content__padding-right @tab-content__padding-bottom @tab-content__padding-left
                '' | false | value
                Accordion tab content padding

## Table variables

#### The `.lib-table()` mixin variables

                Mixin variable
                Default value
                Allowable values
                Comment

                @_table-width
                100%
                '' | false | value
                Table width

                @_cell-padding-horizontal
                @indent__s
                '' | false | value
                Table cell horizontal padding

                @_cell-padding-vertical
                8px
                '' | false | value
                Table cell vertical padding

                @_table-margin-bottom
                false
                '' | false | value
                Table margin bottom

## Table typography variables

#### The `.lib-table-typography()` mixin variables

                Mixin variable
                Default value
                Allowable values
                Comment

                @_table-td-font-size
                false
                '' | false | value
                Table cell font size

                @_table-td-color
                false
                '' | false | value
                Table cell font color

                @_table-td-font-family
                false
                '' | false | value
                Table cell font family

                @_table-td-font-weight
                false
                '' | false | value
                Table cell font weight

                @_table-td-line-height
                false
                '' | false | value
                Table cell line height

                @_table-td-font-style
                false
                '' | false | value
                Table cell font style

                @_table-th-font-size
                false
                '' | false | value
                Table header cell font size

                @_table-th-color
                @text__color__intense
                '' | false | value
                Table header cell font color

                @_table-th-font-family
                false
                '' | false | value
                Table header cell font family

                @_table-th-font-weight
                @font-weight__bold
                '' | false | value
                Table header cell font weight

                @_table-th-line-height
                false
                '' | false | value
                Table header cell line height

                @_table-th-font-style
                false
                '' | false | value
                Table header cell font style

## Table caption variables

#### The `.lib-table-caption()` mixin variables

                Mixin variable
                Default value
                Allowable values
                Comment

                @_table-caption-hide
                true
                '' | false | value
                Table caption is visible

                @_table-caption-font-size
                false
                '' | false | value
                Table caption font size

                @_table-caption-color
                false
                '' | false | value
                Table caption text color

                @_table-caption-font-family
                false
                '' | false | value
                Table caption font family

                @_table-caption-font-weight
                false
                '' | false | value
                Table caption font weight

                @_table-caption-font-style
                false
                '' | false | value
                Table caption font style

                @_table-caption-line-height
                false
                '' | false | value
                Table caption line height

                @_table-caption-alignment
                false
                '' | false | value
                Table caption alignment

                @_table-caption-margin-top
                false
                '' | false | value
                Table caption top margin

                @_table-caption-margin-bottom
                false
                '' | false | value
                Table caption bottom margin

## Table cells resize variables

#### The `.lib-table-resize()` mixin variables

                Mixin variable
                Default value
                Allowable values
                Comment

                @_th-padding-top
                @_td-padding-top
                '' | false | value
                Table header cell top padding

                @_th-padding-right
                @_td-padding-right
                '' | false | value
                Table header cell right padding

                @_th-padding-bottom
                @_td-padding-top
                '' | false | value
                Table header cell bottom padding

                @_th-padding-left
                @_td-padding-right
                '' | false | value
                Table header cell left padding

                @_td-padding-top
                @table-cell__padding-vertical / 2
                '' | false | value
                Table cell top padding

                @_td-padding-right
                @table-cell__padding-horizontal / 2
                '' | false | value
                Table cell right padding

                @_td-padding-bottom
                @_td-padding-top
                '' | false | value
                Table cell bottom padding

                @_td-padding-left
                @_td-padding-right
                '' | false | value
                Table cell left padding

## Table background variables

#### The `.lib-table-background-color()` mixin variables

                Mixin variable
                Allowable values
                Variables list names
                Comment

                @_table-background-color
                false
                '' | false | value
                Table background

                @_table-head-background-color
                @table__background-color
                '' | false | value
                Table thead background

                @_table-foot-background-color
                @table__background-color
                '' | false | value
                Table tfoot background

                @_table-body-th-background-color
                @table__background-color
                '' | false | value
                Table header cells background

                @_table-td-background-color
                @table__background-color
                '' | false | value
                Table cells background

## Table borders customization variables

#### The `.lib-table-bordered()` mixin variables

                Mixin variable
                Default value
                Allowed values
                Comment

                @_table_type
                normal
                normal | horizontal | vertical | light | clear | horizontal_body
                Table border settings. When is set to "horizontal_body", the table border settings are applyed only for tbody

                @_table_border-width
                @border-width__base
                '' | false | value
                Table border width

                @_table_border-style
                solid
                '' | false | value
                Table border style

                @_table_border-color
                @border-color__base
                '' | false | value
                Table border color

## Striped table variable

#### The `.lib-table-striped()` mixin variables

                Mixin variable
                Variables list names
                Default value
                Allowed values
                Comment

                @_stripped-background-color
                @table-cell-stripped__background-color
                lighten(@table-cell__hover__background-color, 15%)
                '' | false | value
                Striped cells background color

                @_stripped-color
                @table-td__color
                @text__color
                '' | false | value
                Striped cells text color

                @_stripped-direction
                -
                horizontal
                horizontal | vertical
                Stripes direction

                @_stripped-highlight
                -
                odd
                odd | even
                Rows stripes are applyed to

# Table with rows hover mixin variables

#### The `.lib-table-hover()` mixin variables

                Mixin variable
                Default value
                Allowed values
                Comment

                @_table_cell-background-color-hover
                @panel__background-color
                '' | false | value
                Hovered table row background

                @_table_cell-odd-background-color-hover
                @_table_cell-background-color-hover
                '' | false | value
                Hovered table odd row background

## Responsive table technics #2 variables

#### The `.lib-table-responsive()` mixin variables

                Mixin variable
                Variables list names
                Default value
                Allowed values
                Comment

                @_table-background-color-responsive
                @table-responsive__background-color
                @table__background-color
                '' | false | value
                Responsive table background

                @_table-th-background-color-responsive
                @table-responsive-th__background-color
                false
                '' | false | value
                Responsive table header cells background

                @_reset-table-striped
                false
                -
                true | false
                Responsive table striped cells

                @_reset-table-hover
                false
                -
                true | false
                Responsive table hovered table row background

                @_table-responsive-cell-padding
                @indent__xs 0
                -
                true | false
                Responsive table cells padding

## Tooltips variables

#### The `.lib-tooltip()` mixin variables

                Mixin variable
                Default value
                Allowed values
                Comment

                @_tooltip-position
                top
                top | right | bottom | left
                Side of the element tooltip is displayed on

                @_tooltip-selector-toggle
                ~".tooltip-toggle"
                '' | false | value
                The classname of the element that toggles tooltip

                @_tooltip-selector-toggle
                ~".tooltip-content"
                '' | false | value
                The tooltip content classname

                @_tooltip-background
                @color-white
                '' | false | value
                Tooltip background color

                @_tooltip-border-color
                #bbb
                '' | false | value
                Tooltip border color

                @_tooltip-border-width
                1px
                '' | false | value
                Tooltip border width

                @_tooltip-border-radius
                false
                '' | false | value
                Tooltip border radius

                @_tooltip-color
                @primary__color
                '' | false | value
                Tooltip text color

                @_tooltip-cursor
                help
                '' | false | value
                Tooltip cursor

                @_tooltip-font-size
                false
                '' | false | value
                Tooltip font size

                @_tooltip-font-family
                false
                '' | false | value
                Tooltip font family

                @_tooltip-font-weight
                false
                '' | false | value
                Tooltip font weight

                @_tooltip-font-style
                false
                '' | false | value
                Tooltip font style

                @_tooltip-line-height
                1.4
                '' | false | value
                Tooltip line height

                @_tooltip-margin
                false
                '' | false | value
                Tooltip margin

                @_tooltip-padding
                12px 16px
                '' | false | value
                Tooltip padding

                @_tooltip-min-width
                210px
                '' | false | value
                Tooltip minimal width

                @_tooltip-max-width
                360px
                '' | false | value
                Tooltip maximal width

                @_tooltip-arrow-size
                5px
                '' | false | value
                Tooltip arrow size

                @_tooltip-arrow-offset
                10px
                '' | false | value
                Tooltip arrow offset

                @_tooltip-z-index
                100
                '' | false | value
                Tooltip z-index

## Components

### Cross Components variables

                Variable
                Default value
                Allowed values
                Comment

            @component__shadow-size__base
            5px
            constant
            Shadow size across all components. Used to count overlay zones sizes

            @component__box-shadow__base
            1px 1px @component__shadow-size__base rgba(0, 0, 0, .5)
            constant
            Shadow style

            @component-modal__opacity
            .98
            constant
            Default opacity for stacked components