@require '../css/base';

.{$-cui-class-prefix}-checkbox-item
    display: inline-block
    padding-right: 5px

    &.checked
        & .{$-cui-class-prefix}-checkbox-item-icon
            background: $-cui-main-color
            color: white
            text-align: center
            border: $-cui-main-color

            &::before
                content: ''
                display: inline-block
                border: solid 2px white
                border-top: 0;
                border-left: 0;
                size: 5px 10px
                transform: rotate(45deg)

    &.disabled
        color: #aaa
        & .{$-cui-class-prefix}-checkbox-item-icon
            background: $-cui-disabled
            border-color: $-cui-disabled
            color: $-cui-disabled

    &-icon
        display: inline-block
        size: 18px
        position: relative
        border: #ccc
        color: white
        vertical-align: middle
        margin-right: 3px

        &-ipt
            absolute: left 0 top 0
            padding: 0
            margin: 0
            size: 18px
            opacity: 0
            z-index: -1

    &-text
        vertical-align: middle