TargetProcess/tauCharts

@import "variable";

.tau-chart {
    &__checkbox {
        position: relative;
        display: block;

        &__input {
            position: absolute;
            z-index: -1;
            opacity: 0;
        }
        &__icon {
            position: relative;
            width: 14px;
            height: 14px;
            top: 3px;
            display: inline-block;
            border: 1px solid @border-forms-color;
            border-radius: 2px;
            background: @checkbox-bg-color;

            &:before {
                display: none;
                content: '';
                background-image: @checkbox-checked-icon;
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        &__text {
            margin-left: 5px;
        }

        &__input ~ &__text {
            cursor: pointer;
        }

        &__input:disabled ~ &__text {
            cursor: default;
            opacity: 0.3;
        }

        &__input:not(:disabled):focus + &__icon {
            box-shadow: 0 0 0 1px fade(@shadow-color, 30%), 0 0 7px 0 @border-forms-focus-color;
            outline: none;
        }

        &:hover &__input:not(:disabled) ~ &__icon {
            border-color: @border-forms-hover-color;
        }

        &__input:checked + &__icon {
            background: @checkbox-bg-color;
        }

        &__input:checked + &__icon:before {
            display: block;

        }

    }

    /* region Select --------------------------------------------------*/

    &__select {
        font-size: @font-size-m;
        font-family: inherit;
        display: inline-block;
        height: @forms-height;
        line-height: @forms-height;
        vertical-align: middle;
        padding: 2px;
        background-color: @forms-bg-color;
        border: 1px solid @border-forms-color;
        border-radius: 2px;
        color: @font-color;

        &:focus {
            box-shadow: 0 0 0 1px fade(@shadow-color, 30%), 0 0 7px 0 @border-forms-focus-color;
            outline: none;
        }

        &[disabled] {
            opacity: 0.3;
            cursor: default;
        }

        &[multiple] {
            height: auto;
        }

        & option[disabled] {
            opacity: 0.6;
        }

    }
}