
$background-primary: #f2f2f2;
$background-secondary: #dff1f9;
$background-secondary-alternate: #d4efd5;
$background-tertiary: #fd7b1d;
$foreground-tertiary: #ffffff;
$foreground-disabled: #a4a4a4;
$foreground-active: #848484;

$text-emphasis: #fc7e1c;
$warn: #c85a6a;
$brand-primary-one: #209021;


// generic transform
@mixin transform($transforms) {
    -moz-transform: $transforms;
    -o-transform: $transforms;
    -ms-transform: $transforms;
    -webkit-transform: $transforms;
    transform: $transforms;
}

@mixin valid-and-dirty-or-touched {
    border-left: 1px solid rgba(34, 36, 38, 0.15);
    transition-property: border-left, border-left-width;
    transition-delay: 1s;
    transition-duration: 600ms;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@mixin valid-and-dirty-or-touched-focused {
    border-left: 5px solid $brand-primary-one;
    transition-property: border-left;
    transition-delay: 0s;
    transition-duration: 0s;
}

@mixin invalid-and-dirty-or-touched {
    border-left: 5px solid $warn;
    border-color: $warn
}

@mixin invalid-and-pristine-or-untouched {
    border-left: 5px solid $foreground-active;
}

$finder-s-input: '.ui.input input';

.rules__engine-container{

    .cw-message {
        &.ui.message {
        &:first-child {
            margin: 2em 2em 1em;
        }
        }
    }

    .cw-loading {
        background-color: rgba(10, 10, 10, 0.35);
        width: 100%;
        height: 100%;
    }

    .ui.fluid.input input:hover {
        border-color: rgba(34, 36, 38, 0.35);
        box-shadow: none;
    }

    .cw-rule-status-text {
        margin-top: .2em;
        margin-right: 2em;
    }

    .cw-saved {
        .ui.checkbox input:checked ~ .box:after, .ui.checkbox input:checked ~ label:after {
        background-color: $brand-primary-one;
        border: .5em solid white;
        }
        .cw-rule-status-text {
        opacity: 0;
        transition-property: opacity;
        transition-delay: 1s;
        transition-duration: 2s;
        transition-timing-function: cubic-bezier(1, 0.1, 0, 1);
        }
    }

    .cw-saving {
        .ui.checkbox input:checked ~ .box:after, .ui.checkbox input:checked ~ label:after {
        background-color: $background-tertiary;
        }
        .cw-rule-status-text {
        opacity: 1;
        transition-property: opacity;
        transition-delay: 0s;
        transition-duration: 0s;
        }
    }

    /* Semantic Text input box. */

    .ng-dirty.ng-valid input:focus,
    .ng-dirty.ng-valid .ui.input input:focus,
    input:focus.ng-valid.ng-dirty,
    .ng-dirty.ui.input input:focus.ng-valid,
    .ng-dirty.ng-valid .ui.input input:focus,
    .ng-dirty.ui.selection.dropdown.ng-valid {
        @include valid-and-dirty-or-touched-focused
    }

    .ng-touched.ng-valid .ui.selection.dropdown.search.visible {
        @include valid-and-dirty-or-touched-focused
    }

    .ng-dirty.ng-valid input,
    input.ng-dirty.ng-valid,
    .ng-dirty.ui.input input.ng-valid,
    .ng-dirty.ng-valid .ui.input input,
    .ng-dirty.ui.dropdown.ng-valid,
    .ng-dirty.ui.selection.dropdown.ng-valid,
    .ng-touched.ng-valid .ui.selection.dropdown.search {
        @include valid-and-dirty-or-touched
    }

    // Untouched fields that aren't yet valid.
    .ng-untouched.ng-pristine.ng-invalid {
        #{$finder-s-input}, // Text Input fields
        .ui.selection.dropdown.search // Drop down fields
        {
        @include invalid-and-pristine-or-untouched
        }
    }

    // Touched but unmodified (pristine) fields that aren't valid.
    .ng-touched.ng-pristine.ng-invalid {
        #{$finder-s-input}, // Text Input fields
        .ui.selection.dropdown.search // Drop down fields
        {
        @include invalid-and-dirty-or-touched
        }
    }

    // Dirty fields that aren't valid.
    .ng-dirty.ng-invalid {
        #{$finder-s-input}, // Text Input fields
        .ui.selection.dropdown.search // Drop down fields
        {
        @include invalid-and-dirty-or-touched
        }
    }

    .cw-rule-engine {
        > .cw-header {
        padding: 1em 2em 2em 2em;
        .cw-button-add {
            background-color: $background-tertiary;
            color: $foreground-tertiary;
        }
        }

        .cw-btn-group .ui.basic.buttons .ui.button:focus {
        border: 1px solid #96C8DA;
        }
    }

    .cw-warn {
        color: $warn;
    }

    .cw-hidden {
        display: none !important;
    }

    .cw-button-link.ui.basic.black.button {
        box-shadow: none !important;
    }

    .cw-button-link.ui.basic.black.button {
        &:focus,
        &:hover,
        &:active {
        box-shadow: none !important;
        background-color: inherit;
        }
    }

    .cw-filter-links {
        font-size: .8em;
        color: $foreground-disabled;
    }

    .cw-filter-link {
        &.active {
        &:hover {
            color: $foreground-active;
        }
        font-weight: bold;
        color: $foreground-active;
        }
        &:hover {
        color: $foreground-disabled;
        }
        color: $foreground-disabled;
    }

    .cw-rule {
        margin: 0 2em 2em 2em;
        border: 1px solid $background-primary;
        border-radius: .5em;

        .cw-header-actions {
            margin-right: .5em;
            position: relative;

            .cw-btn-group .ui.basic.buttons .ui.button:focus {
                border: none;
            }

            .ui.vertical.menu {
                position: absolute;
                right: 0;
                top: 25px;
                z-index: 4;
            }

        }

        .cw-type-dropdown {
            max-height: 2em;
        }
        .cw-input-label-right {
            margin-left: .25em;
        }
        .cw-input-label-left {
            margin-right: .25em;
        }
        .cw-input,
        &.cw-last {
            margin-right: 1em;
        }

        .cw-rule-name-input {
            margin-right: 1em;
        }

        > .cw-header {
            background-color: $background-primary;
            padding: .35em 0;
            border-top-left-radius: .5em;
            border-top-right-radius: .5em;
        }

        .cw-rule-caret {
            min-width: 1.25em;
            max-width: 1.25em;
            margin-left: 0;
        }

        .cw-rule-cloud {
            min-width: 1.0em;
            max-width: 1.0em;
            margin-left: .5em;
            margin-right: .25em;
            color: white;
            text-shadow: 1px 1px 8px #555555;
            &.out-of-sync {
                color: red;
                text-shadow: 1px 1px 8px black;
            }
        }
        .cw-fire-on-label {
            font-weight: bold;
            margin-right: .5em;
            min-width: 4em;
            max-width: 4em;
        }

        .cw-fire-on-dropdown {
            min-width: 12em;
            max-width: 12em;
        }

        .cw-btn-group {
            .ui.basic {
                background-color: white;
            }
        }

        .cw-accordion-body {
            margin: 1em;
        }

        .cw-action-separator {
            background-color: $background-secondary-alternate;
        }

        .cw-add-action-button {
            width: 2em;
            height: 2em;
        }

        .cw-comparator-selector {
            min-width: 10em;
            max-width: 10em;
        }

        .cw-condition-component-body {
            margin-left: 1em;
        }

        cw-toggle-input.cw-input {
            margin-top: .75em;
        }

        .cw-condition-row, .cw-action-row {
            margin-bottom: .5em;
            min-height: 1em;
        }

        .cw-action-row {
            // This is the width + margin of the condition toggle button
            padding-left: 6em;
        }

    }

    .cw-condition-group-separator, .cw-action-separator {
        padding: .5em 1em;
        background-color: $background-secondary;
        border-radius: .5em;
        width: 100%;
    }

    .cw-action-group {
        margin-top: 1em;
    }

    .cw-rule-group {

        .cw-header-text {
            width: 200em;
            margin-left: 2em;
        }

        .cw-group-operator {
            color: $text-emphasis;
            background-color: $background-primary;
            opacity: 50;
            height: 1.25em;
            width: 4em;
            vertical-align: middle;
        div {
            margin-top: -.5em;
        }
        &.ui.button:hover {
            background-color: $background-primary !important;
        }

        }
    }

    .cw-last {
        margin-right: 0;
    }

    .ui.basic.button.cw-button-toggle-operator {
        width: 100%;
        margin: 0;
    }

    .cw-rule-actions, .cw-conditions {
        padding: .5em 2em 0 2em;

        .cw-entry {
        > div.buttons {
            width: 100%;
        }
        }
        .cw-btn-group {
        .ui.basic.buttons {
            border: none;
        }

        }

        .cw-add-btn {
            min-width: 39px;
            height: 36px;
        }

        .cw-delete-btn {
            margin-right: .5em;
        }

        .trash {
            color: $warn;
        }
    }

    .cw-button-add-item i {
        color: $brand-primary-one;
    }

    .cw-spacer.cw-condition-operator {
        width: 4em
    }

    .cw-spacer.cw-add-condition {
        width: 2.25em;
    }

    .basic button.ui.cw-button-add-item:hover {
        font-weight: bolder;
    }

    .cw-condition-toggle {
        min-width: 5em;
        max-width: 5em;
        margin-right: 1em;
    }

    .cw-condition-buttons {
        width: 3em;
        max-width: 3em;
    }

    .cw-name-field {
        margin: .5em 2em .5em 2em;
    }

    .cw-spacer {
        &.cw-4em {
            width: 4em;
        }

        &.cw-3em {
            width: 3em;
        }
        &.cw-2em {
            width: 2em;
        }

    }

    .ui.modal.cw-modal-dialog2 {
        display: block;
        margin: -103px 0 0 -200px;
        height: 600px;
        width: 400px;
    }

    .ui.modal.cw-modal-dialog {
        display: block;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        top: 50%;
        left: 50%;
        @include transform(translate(-50%, -50%));
    }

    .cw-modal-dialog .cw-dialog-body {
        height: 100%;
        width: 100%;
    }

    .cw-visitors-location {
        .cw-latLong .ui.input input, .cw-radius .ui.input input {
        text-align: right;
        color: lightgray;
        }
    }

    cw-modal-dialog .ui.dimmer {
        background-color: rgba(0, 0, 0, 0.55);
    }
}