/**
 * Variables
 */

.select-wrapper {
    ////
    /// The background of the select component
    /// @name background
    /// @type color
    ////
    ----background: #{color('white')};
    ////
    /// The border top color of the select component
    /// @name border-top-color
    /// @type color
    ////
    ----border-top-color: #{color('light-55')};
    ////
    /// The border right color of the select component
    /// @name border-right-color
    /// @type color
    ////
    ----border-right-color: #{color('light-55')};
    ////
    /// The border bottom color of the select component
    /// @name border-bottom-color
    /// @type color
    ////
    ----border-bottom-color: #{color('light-55')};
    ////
    /// The border left color of the select component
    /// @name border-left-color
    /// @type color
    ////
    ----border-left-color: #{color('light-55')};
    ////
    /// The border color of the select component
    /// @name border-color
    ////
    ----border-color: #{var(----border-top-color) var(----border-right-color) var(----border-bottom-color) var(----border-left-color)};
    ////
    /// The border style of the select component
    /// @name border-style
    ////
    ----border-style: #{var(--border-style)};
    ////
    /// The border top width of the select component
    /// @name border-top-width
    ////
    ----border-top-width: #{var(--border-top-width)};
    ////
    /// The border right width of the select component
    /// @name border-right-width
    ////
    ----border-right-width: #{var(--border-right-width)};
    ////
    /// The border bottom width of the select component
    /// @name border-bottom-width
    ////
    ----border-bottom-width: #{var(--border-bottom-width)};
    ////
    /// The border left width of the select component
    /// @name border-left-width
    ////
    ----border-left-width: #{var(--border-left-width)};
    ////
    /// The border width of the select component
    /// @name border-width
    ////
    ----border-width: #{var(----border-top-width) var(----border-right-width) var(----border-bottom-width) var(----border-left-width)};
    ////
    /// The border top left radius of the select component
    /// @name border-top-left-radius
    /// @type size
    ////
    ----border-top-left-radius: #{var(--border-top-left-radius)};
    ////
    /// The border top right radius of the select component
    /// @name border-top-right-radius
    /// @type size
    ////
    ----border-top-right-radius: #{var(--border-top-right-radius)};
    ////
    /// The border bottom right radius of the select component
    /// @name border-bottom-right-radius
    /// @type size
    ////
    ----border-bottom-right-radius: #{var(--border-bottom-right-radius)};
    ////
    /// The border bottom left radius of the select component
    /// @name border-bottom-left-radius
    /// @type size
    ////
    ----border-bottom-left-radius: #{var(--border-bottom-left-radius)};
    ////
    /// The border radius of the select component
    /// @name border-radius
    ////
    ----border-radius: #{var(----border-top-left-radius) var(----border-top-right-radius) var(----border-bottom-right-radius) var(----border-bottom-left-radius)};
    ////
    /// The box shadow horizontal offset of the select component
    /// @name box-shadow-offset-x
    ////
    ----box-shadow-offset-x: #{var(--box-shadow-offset-x)};
    ////
    /// The box shadow vertical offset of the select component
    /// @name box-shadow-offset-y
    ////
    ----box-shadow-offset-y: #{var(--box-shadow-offset-y)};
    ////
    /// The box shadow blur radius of the select component
    /// @name box-shadow-blur-radius
    ////
    ----box-shadow-blur-radius: #{var(--box-shadow-blur-radius)};
    ////
    /// The box shadow spread radius of the select component
    /// @name box-shadow-spread-radius
    ////
    ----box-shadow-spread-radius: #{var(--box-shadow-spread-radius)};
    ////
    /// The box shadow spread radius of the select component
    /// @name box-shadow-color
    ////
    ----box-shadow-color: #{var(--box-shadow-color)};
    ////
    /// The box shadow of the select component
    /// @name box-shadow
    ////
    ----box-shadow: #{var(----box-shadow-offset-x) var(----box-shadow-offset-y) var(----box-shadow-blur-radius) var(----box-shadow-spread-radius) var(----box-shadow-color)};
    ////
    /// The color of the select component item
    /// @name color
    /// @type color
    ////
    ----color: #{contrast-color($color-white)};
    ////
    /// The font size of the select component
    /// @name font-size
    /// @type size
    ////
    ----font-size: #{font-size()};
    ////
    /// The font weight of the select component
    /// @name font-weight
    ////
    ----font-weight: #{font-weight('normal')};
    ////
    /// The line height of the select component
    /// @name line-height
    ////
    ----line-height: #{var(--line-height)};
    ////
    /// The margin top of the select component
    /// @name margin-top
    /// @type size
    ////
    ----margin-top: #{calc(var(--margin-top) / 2)};
    ////
    /// The margin right of the select component
    /// @name margin-right
    /// @type size
    ////
    ----margin-right: #{calc(var(--margin-right) / 2)};
    ////
    /// The margin bottom of the select component
    /// @name margin-bottom
    /// @type size
    ////
    ----margin-bottom: #{calc(var(--margin-bottom) / 2)};
    ////
    /// The margin left of the select component
    /// @name margin-left
    /// @type size
    ////
    ----margin-left: #{calc(var(--margin-left) / 2)};
    ////
    /// The margin of the select component
    /// @name margin
    ////
    ----margin: #{var(----margin-top) var(----margin-right) var(----margin-bottom) var(----margin-left)};
    ////
    /// The padding top of the select component
    /// @name padding-top
    /// @type size
    ////
    ----padding-top: #{var(--padding-top)};
    ////
    /// The padding right of the select component
    /// @name padding-right
    /// @type size
    ////
    ----padding-right: #{var(--padding-right)};
    ////
    /// The padding bottom of the select component
    /// @name padding-bottom
    /// @type size
    ////
    ----padding-bottom: #{var(--padding-bottom)};
    ////
    /// The padding left of the select component
    /// @name padding-left
    /// @type size
    ////
    ----padding-left: #{var(--padding-left)};
    ////
    /// The padding of the select component
    /// @name padding
    ////
    ----padding: #{var(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)};
    ////
    /// The minimum width of the select component
    /// @name min-width
    ////
    ----min-width: #{240px};
    ////
    /// The maximum width of the select component
    /// @name max-width
    ////
    ----max-width: #{90vw};
    ////
    /// The maximum height of the select component body
    /// @name max-height
    ////
    ----max-height: #{300px};
    ////
    /// The z-index of the select component
    /// @name z-index
    ////
    ----z-index: #{2000};
    ////
    /// The background of the select component option
    /// @name option--background
    ////
    ----option--background: #{var(----background)};
    ////
    /// The background of the select component option when hovered or focused
    /// @name option--background--hover
    /// @type color
    ////
    ----option--background--hover: #{color('light-25')};
    ////
    /// The background of the select component option when active
    /// @name option--background--active
    ////
    ----option--background--active: #{var(----option-background--active)};
    ////
    /// The background of the select component option when disabled
    /// @name option--background--disabled
    /// @type color
    ////
    ----option--background--disabled: #{transparent};
    ////
    /// The border top left radius of the modal component
    /// @name option--border-top-left-radius
    ////
    ----option--border-top-left-radius: #{0};
    ////
    /// The border top right radius of the modal component
    /// @name option--border-top-right-radius
    ////
    ----option--border-top-right-radius: #{0};
    ////
    /// The border bottom right radius of the modal component
    /// @name option--border-bottom-right-radius
    ////
    ----option--border-bottom-right-radius: #{0};
    ////
    /// The border bottom left radius of the modal component
    /// @name option--border-bottom-left-radius
    ////
    ----option--border-bottom-left-radius: #{0};
    ////
    /// The border radius of the modal component
    /// @name option--border-radius
    ////
    ----option--border-radius: #{var(----option--border-top-left-radius) var(----option--border-top-right-radius) var(----option--border-bottom-right-radius) var(----option--border-bottom-left-radius)};
    ////
    /// The color of the select component option
    /// @name option--color
    ////
    ----option--color: #{var(----color)};
    ////
    /// The color of the select component option when hovered or focused
    /// @name option--color--hover
    ////
    ----option--color--hover: #{var(----option--color)};
    ////
    /// The color of the select component option when active
    /// @name option--color--active
    ////
    ----option--color--active: #{var(----option--color)};
    ////
    /// The color of the select component option when disabled
    /// @name option--color--disabled
    /// @type color
    ////
    ----option--color--disabled: #{color('light-65')};
    ////
    /// The padding top of the select component option
    /// @name option--padding-top
    ////
    ----option--padding-top: #{calc(var(----padding-top) / 2)};
    ////
    /// The padding right of the select component option
    /// @name option--padding-right
    ////
    ----option--padding-right: #{var(----padding-right)};
    ////
    /// The padding bottom of the select component option
    /// @name option--padding-bottom
    /// @type size
    ////
    ----option--padding-bottom: #{calc(var(----padding-bottom) / 2)};
    ////
    /// The padding left of the select component option
    /// @name option--padding-left
    /// @type size
    ////
    ----option--padding-left: #{var(----padding-left)};
    ////
    /// The padding of the select component option
    /// @name option--padding
    ////
    ----option--padding: #{var(----option--padding-top) var(----option--padding-right) var(----option--padding-bottom) var(----option--padding-left)};
    ////
    /// The margin of the select component divider
    /// @name divider--margin
    ////
    ----divider--margin: #{spacing('1/2')};
    ////
    /// The background of the select component header
    /// @name header--background
    /// @type color
    ////
    ----header--background: #{color('gray-05')};
    ////
    /// The border color of the select component header
    /// @name header--border-color
    ////
    ----header--border-color: #{var(----border-color)};
    ////
    /// The border style of the select component header
    /// @name header--border-style
    ////
    ----header--border-style: #{var(----border-style)};
    ////
    /// The border top width of the select component header
    /// @name header--border-top-width
    ////
    ----header--border-top-width: #{var(----border-top-width)};
    ////
    /// The border right width of the select component header
    /// @name header--border-right-width
    ////
    ----header--border-right-width: #{var(----border-right-width)};
    ////
    /// The border bottom width of the select component header
    /// @name header--border-bottom-width
    ////
    ----header--border-bottom-width: #{0};
    ////
    /// The border left width of the select component header
    /// @name header--border-left-width
    ////
    ----header--border-left-width: #{var(----border-left-width)};
    ////
    /// The border width of the select component header
    /// @name header--border-width
    ////
    ----header--border-width: #{var(----header--border-top-width) var(----header--border-right-width) var(----header--border-bottom-width) var(----header--border-left-width)};
    ////
    /// The color of the select component header
    /// @name header--color
    ////
    ----header--color: #{var(----color)};
    ////
    /// The padding top of the select component header
    /// @name header--padding-top
    ////
    ----header--padding-top: #{calc(var(----padding-top) * 3 / 4)};
    ////
    /// The padding right of the select component header
    /// @name header--padding-right
    ////
    ----header--padding-right: #{var(----padding-right)};
    ////
    /// The padding bottom of the select component header
    /// @name header--padding-bottom
    /// @type size
    ////
    ----header--padding-bottom: #{calc(var(----padding-bottom) * 3 / 4)};
    ////
    /// The padding left of the select component header
    /// @name header--padding-left
    /// @type size
    ////
    ----header--padding-left: #{var(----padding-left)};
    ////
    /// The padding of the select component header
    /// @name header--padding
    ////
    ----header--padding: #{var(----header--padding-top) var(----header--padding-right) var(----header--padding-bottom) var(----header--padding-left)};
    ////
    /// The background of the select component body
    /// @name body--background
    ////
    ----body--background: #{var(----background)};
    ////
    /// The border color of the select component body
    /// @name body--border-color
    ////
    ----body--border-color: #{var(----border-color)};
    ////
    /// The border style of the select component body
    /// @name body--border-style
    ////
    ----body--border-style: #{var(----border-style)};
    ////
    /// The border top width of the select component body
    /// @name body--border-top-width
    ////
    ----body--border-top-width: #{var(----border-top-width)};
    ////
    /// The border right width of the select component body
    /// @name body--border-right-width
    ////
    ----body--border-right-width: #{var(----border-right-width)};
    ////
    /// The border bottom width of the select component body
    /// @name body--border-bottom-width
    ////
    ----body--border-bottom-width: #{var(----border-bottom-width)};
    ////
    /// The border left width of the select component body
    /// @name body--border-left-width
    ////
    ----body--border-left-width: #{var(----border-left-width)};
    ////
    /// The border width of the select component body
    /// @name body--border-width
    ////
    ----body--border-width: #{var(----body--border-top-width) var(----body--border-right-width) var(----body--border-bottom-width) var(----body--border-left-width)};
    ////
    /// The color of the select component body
    /// @name body--color
    ////
    ----body--color: #{var(----color)};
    ////
    /// The padding top of the select component body
    /// @name body--padding-top
    ////
    ----body--padding-top: #{var(----padding-top)};
    ////
    /// The padding right of the select component body
    /// @name body--padding-right
    ////
    ----body--padding-right: #{0};
    ////
    /// The padding bottom of the select component body
    /// @name body--padding-bottom
    /// @type size
    ////
    ----body--padding-bottom: #{var(----padding-bottom)};
    ////
    /// The padding left of the select component body
    /// @name body--padding-left
    /// @type size
    ////
    ----body--padding-left: #{0};
    ////
    /// The padding of the select component body
    /// @name body--padding
    ////
    ----body--padding: #{var(----body--padding-top) var(----body--padding-right) var(----body--padding-bottom) var(----body--padding-left)};
    ////
    /// The background of the select component footer
    /// @name footer--background
    /// @type color
    ////
    ----footer--background: #{color('gray-05')};
    ////
    /// The border color of the select component footer
    /// @name footer--border-color
    ////
    ----footer--border-color: #{var(----border-color)};
    ////
    /// The border style of the select component footer
    /// @name footer--border-style
    ////
    ----footer--border-style: #{var(----border-style)};
    ////
    /// The border top width of the select component footer
    /// @name footer--border-top-width
    ////
    ----footer--border-top-width: #{var(----border-top-width)};
    ////
    /// The border right width of the select component footer
    /// @name footer--border-right-width
    ////
    ----footer--border-right-width: #{var(----border-right-width)};
    ////
    /// The border bottom width of the select component footer
    /// @name footer--border-bottom-width
    ////
    ----footer--border-bottom-width: #{var(----border-bottom-width)};
    ////
    /// The border left width of the select component footer
    /// @name footer--border-left-width
    ////
    ----footer--border-left-width: #{var(----border-left-width)};
    ////
    /// The border width of the select component footer
    /// @name footer--border-width
    ////
    ----footer--border-width: #{var(----footer--border-top-width) var(----footer--border-right-width) var(----footer--border-bottom-width) var(----footer--border-left-width)};
    ////
    /// The color of the select component footer
    /// @name footer--color
    ////
    ----footer--color: #{var(----color)};
    ////
    /// The padding top of the select component footer
    /// @name footer--padding-top
    ////
    ----footer--padding-top: #{calc(var(----padding-top) * 3 / 4)};
    ////
    /// The padding right of the select component footer
    /// @name footer--padding-right
    ////
    ----footer--padding-right: #{var(----padding-right)};
    ////
    /// The padding bottom of the select component footer
    /// @name footer--padding-bottom
    /// @type size
    ////
    ----footer--padding-bottom: #{calc(var(----padding-bottom) * 3 / 4)};
    ////
    /// The padding left of the select component footer
    /// @name footer--padding-left
    /// @type size
    ////
    ----footer--padding-left: #{var(----padding-left)};
    ////
    /// The padding of the select component footer
    /// @name footer--padding
    ////
    ----footer--padding: #{var(----footer--padding-top) var(----footer--padding-right) var(----footer--padding-bottom) var(----footer--padding-left)};
}