// Archer:Util
// 
// @file    util.styl
// @author  firede(firede@firede.us)

@import 'config'
@import 'function'

/**
 * clearfix
 *
 * @see http://h5bp.com/q
 */
clearfix()
    &:after,
    &:before
        content: " "
        display: table
    &:after
        clear: both

/**
 * size settings
 */
size()
    if length(arguments) == 1
        width: arguments[0]
        height: arguments[0]
    else
        width: arguments[0]
        height: arguments[1]

/**
 * no bullets
 */
no-bullet()
    list-style-image: none
    list-style-type: none
    margin-right: 0

no-bullets()
    list-style: none
    li
        no-bullet()

/**
 * retina image
 */
retina-image(_path, _width = auto, _height = auto, _dppx = $retina_dppx)
    background-image: url(_path)

    _media_string = hidpi(_dppx)
    @media _media_string
        _ext = extname(_path)
        _path = pathjoin(
            dirname(_path),
            basename(_path, _ext) + $retina_suffix + _ext
        )
        background-image: url(_path)
        if _width in (cover contain) and _height == auto
            _height = null
        background-size: _width _height

/**
 * hide text
 *
 * @see http://goo.gl/EglZN
 */
hide-text()
    color: transparent
    font: 0 / 0 a
    text-shadow: none

/**
 * ellipsis
 */
ellipsis(_line = 1)
    overflow: hidden
    text-overflow: ellipsis
    display: -webkit-box
    -webkit-line-clamp: _line
    -webkit-box-orient: vertical

/**
 * position shortcut
 */
_pos(_type, _args)
    _pos_attrs = (left right top bottom)
    position: unquote(_type)
    if _args in _pos_attrs
        // args like: left
        {_args}: 0
    else if _args[0] in _pos_attrs and _args[1] is a 'unit'
        // args like: left 10px
        {_args[0]}: _args[1] is a 'unit' ? _args[1] : 0
    else
        // args like: top, right 20px
        for _arg in _args
            {_arg[0]}: _arg[1] is a 'unit' ? _arg[1] : 0

fixed()
    _pos('fixed', arguments)

absolute()
    _pos('absolute', arguments)

relative()
    _pos('relative', arguments)

/**
 * arrow
 */
arrow(_size, _color, _direction, _start_position = center, _start_offset = 0)
    _opposite_direction = opposite-position(_direction)
    position: relative if @position == null
    &:after
        position: absolute
        size: 0
        content: ' '
        pointer-events: none
        border: solid transparent
        border-width: (_size / 2)
        border-{_opposite_direction}-color: _color
        {_opposite_direction}: 100%
        if _start_position != center
            {_start_position}: _start_offset
        else
            if _direction in (left right)
                top: 50%
                margin-top: -@border-width + _start_offset
            if _direction in (top bottom)
                left: 50%
                margin-left: -@border-width + _start_offset