@function luma($c) {
    $-local-red: red(rgba($c, 1.0));
    $-local-green: green(rgba($c, 1.0));
    $-local-blue: blue(rgba($c, 1.0));

    @return (0.2126 * $-local-red  +
           0.7152 * $-local-green +
           0.0722 * $-local-blue) / 255;
}

@function pick-visible-color($bg, $c1, $c2) {
    $bg-luma: luma($bg);
    $c1-luma: luma($c1);
    $c2-luma: luma($c2);

    $c1-diff: abs($bg-luma - $c1-luma);
    $c2-diff: abs($bg-luma - $c2-luma);

    @if $c1-diff > $c2-diff {
        @return $c1;
    } @else {
        @return $c2;
    }
}

@mixin form-theme($button-color, $text-color) {
    .btn-primary,
    .nav-pills .nav-link.active,
    .bs-datepicker-head,
    .bs-datepicker-body .selected,
    .bs-datepicker-head button {
        background-color: $button-color;
        color: pick-visible-color(darken($button-color, 10%), #efefef, $text-color);
    }
    [class*=btn-outline] {

        &[class*=primary], &.btn-secondary {
            border: 1px solid $button-color;
            color: $text-color;
            &:hover {
                background-color: $button-color;
                color: pick-visible-color(darken($button-color, 10%), #efefef, $text-color);
            }
        }

        &[class*=danger] {
            border: 1px solid #dc3545;
            color: #dc3545;
            &:hover {
                background-color: #dc3545;
                color: #fff;
            }
        }

        &[disabled] {
            color: #aaa;
            border-color: #aaa;
        }
    }
    .input-group [class*=btn-outline] {
        border-color: #ced4da;
        background-color: #e9ecef;
    }
    .ui-select-bootstrap .ui-select-multiple .ui-select-match .close {
        line-height: 0.75 !important;
    }
    .ui-select-bootstrap .ui-select-multiple input.ui-select-search {
        padding: 6px 12px !important;
    }
    [class*=btn-transparent], .ui-select-multiple .ui-select-match-item {
        background-color: transparent;
        border: 1px solid transparent;
        .close {
            line-height: inherit;
        }
        &[class*=primary], &.btn-secondary {
            color: $button-color;
            &:hover {
                border: 1px solid $button-color;
            }
            &:active {
                background-color: $button-color;
                color: #fff;
            }
        }
        &[class*=danger] {
            color: #dc3545;
            &:hover {
                border: 1px solid #dc3545;
            }
            &:active {
                background-color: #dc3545;
                color: #fff;
            }
        }
        &[disabled] {
            color: #aaa;
            border-color: #aaa;
        }
    }
    .form-control.expandable {
        resize: both;
        min-height: 100px;
        height: 200px;
        overflow-y: auto;
        overflow-x: auto;
        padding: 5px;
        &.small-expandable {
            height: 100px;
        }
        &.auto-expandable {
            height:auto;
        }
    }
}