@import 'theme/variables.scss';

@mixin text-selection($color, $opacity: 0.2) {
    &::-moz-selection {
        background-color: rgb($color, $opacity) !important;
        color: $color !important;
    }

    &::selection {
        background-color: rgb($color, $opacity) !important;
        color: $color !important;
    }
}

@mixin prevent-text-selection() {
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -moz-user-select: none;
}

@mixin load-status-states($color, $focusTextColor: $white) {
    background-color: rgb($color, 0.2);

    &:hover,
    &.hover {
        background-color: rgb($color, 0.4);
    }

    &:focus {
        background-color: $color;

        .status-text {
            color: $focusTextColor;
        }
    }
}

@mixin dispatch-status-states($color, $focusTextColor: $white) {
    background-color: rgb($color, 0.2);

    &.hover {
        background-color: rgb($color, 0.4);
    }

    &:focus,
    &:hover {
        background-color: $color;

        .status-text {
            color: $focusTextColor;
        }
    }
}

@mixin load-status-dropdown-change-states($color) {
    &.is-marked {
        background-color: rgb($color, 0.4);
    }

    &:hover,
    &.hover {
        background-color: $color;
    }
}

@mixin load-status-no-states($color) {
    background-color: $color;
}

@mixin hover($color) {
    transition: color $transitionDuration300 ease-in-out;

    &:hover {
        color: $color !important;
    }
}

@mixin load-status-card(
    $color,
    $circleColor,
    $circleColorHover,
    $circleColorFocus,
    $focusTextColor: $white
) {
    &:hover,
    &.hover {
        background-color: rgb($color, 0.4);
        .status {
            .br-circle {
                background-color: $circleColorHover;
            }
        }
    }

    &:focus {
        background-color: $color;

        .status-text {
            color: $focusTextColor;
        }

        .status {
            .br-circle {
                background-color: $circleColorFocus;
            }
        }
    }

    .status {
        .br-circle {
            background-color: $circleColor;
        }
    }
}