form.sss

@define-extend form_element
    /*@extend font*/
    border-radius: 4px
    border: none
    /*box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2)*/
    /*font-family: $fontFamily*/
    /*font-size: $fontSizeDefault*/
    line-height: 18px

[field]
    @extend form_element
    @extend font_default
    background-color: #fff
    padding: 1vh

[btn]
    @extend form_element
    @extend font_default
    background-color: $primaryColor
    color: white
    cursor: pointer
    display: inline-block
    line-height: 3.5vh
    text-align: center
    text-decoration: none
    text-transform: uppercase
    transition: background-color 0.4s, box-shadow 0.4s, color 0.4s
    user-select: none
    vertical-align: middle
    white-space: nowrap
    width: 100%
    &[sm]
        line-height: 2.5vh
    &:hover, &:focus, &[active]
        background-color: color($primaryColor blackness(+ 8%))
        transition: background-color 0.2s, box-shadow 0.2s, color 0.4s
    &[outline]
        background-color: $backgroundLight
        box-shadow: inset 0 0 0 1px color($primaryColor a(30%))
        color: $primaryColor
        &:hover, &:focus, &[active]
            color: color($primaryColor lightness(+ 10%))
            background-color: color($primaryColor lightness(97%))
            box-shadow: inset 0 0 0 1px color($primaryColor a(20%))
        &[yes]
            background-color: $backgroundLight
            box-shadow: inset 0 0 0 1px color($positiveColor a(30%))
            color: $positiveColor
        &[no]
            background-color: $backgroundLight
            box-shadow: inset 0 0 0 1px color($negativeColor a(30%))
            color: $negativeColor
        &[caution]
            background-color: $backgroundLight
            box-shadow: inset 0 0 0 1px color($cautionColor a(30%))
            color: $cautionColor
    &[yes]
        background-color: $positiveColor
    &[no]
        background-color: $negativeColor
    &[caution]
        background-color: $cautionColor

btn-group
    column
        padding-left: 0
        padding-right: 0
        margin-left: -1px
        [btn]
            border-radius: 0
        &:first-child [btn]
            border-radius: 4px 0 0 4px
        &:last-child [btn]
            border-radius: 0 4px 4px 0