@use "variables" as *;

$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: #cb3927;
$color-palette-primary-one: #209021;
$black: #0a0725;
$color-palette-gray-700: #7e7a86;
$color-palette-gray-500: #b3b1b8;
$color-palette-gray-200: #f1f3f4;
$white: #fff;

$action-button-height: 48px;

$spacing-3: 1rem;
$spacing-4: 1.5rem;

// 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 {
    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 {
    transition-property: border-left;
    transition-delay: 0s;
    transition-duration: 0s;
}

@mixin invalid-and-dirty-or-touched {
    box-shadow: 0 2px 0 $warn;
}

@mixin invalid-and-pristine-or-untouched {
}

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

.rules__engine-container {
    display: flex;
    flex-grow: 1;
    min-height: 100%;

    cw-rule-engine {
        box-shadow: $shadow-m;
        padding: $spacing-3 $spacing-4;
        flex-grow: 1;
        background-color: $foreground-tertiary;
        overflow: auto;
    }

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

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

    .close-button {
        font-size: $font-size-md;
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer;
        font-style: normal;
    }

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

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

    .cw-saved {
        .ui.checkbox input:checked ~ .box:after,
        .ui.checkbox input:checked ~ label:after {
            background-color: $color-palette-primary-one;
            border: 0.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,
    p-dropdown.ng-dirty.ng-valid .ui-dropdown {
        @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,
    p-dropdown.ng-touched.ng-valid .ui-dropdown {
        @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-dropdown // 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-dropdown // 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-dropdown // Drop down fields
        {
            @include invalid-and-dirty-or-touched;
        }
    }

    .cw-rule-engine {
        > .cw-header {
            padding-bottom: 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 {
        padding: $spacing-1;
        font-size: $font-size-sm;
        color: $foreground-disabled;

        span:first-child {
            padding: 0 4px 0 0;
        }

        span {
            padding: 0 4px;
        }
    }

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

    .cw-rule {
        margin-bottom: 2em;
        border: 1px solid $background-primary;
        border-radius: 0.5em;
        background-color: #fff;
        font-size: $font-size-md;

        .cw-header-actions {
            margin-right: 0.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;
            }

            p-inputSwitch {
                margin: 4px 15px 0 0;
            }
        }

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

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

        > .cw-header {
            background-color: #fff;
            padding: 0.35em 0;
            border-top-left-radius: 0.5em;
            border-top-right-radius: 0.5em;
        }

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

        .cw-rule-cloud {
            min-width: 1em;
            max-width: 1em;
            margin-left: 0.5em;
            margin-right: 0.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: 0.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: 0.75em;
        }

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

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

    .cw-header-info-arrow {
        font-size: $font-size-md;
        font-weight: bold;
        padding: 0.5em;
    }

    .cw-condition-group-separator,
    .cw-action-separator {
        padding: 0.5em 1em;
        background-color: $background-secondary;
        border-radius: 0.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: -0.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: 0.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: 0.5em;
        }

        .trash {
            color: $warn;
        }
    }

    .cw-button-add-item i {
        color: $color-palette-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;

        button {
            padding: 0.75em 0;
            width: 100%;
        }
    }

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

    .cw-name-field {
        margin: 0.5em 2em 0.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: $color-palette-black-op-50;
    }

    .cw-rule-engine__empty {
        margin-top: 7em;
        text-align: center;

        i {
            font-size: 120px;
            color: $color-palette-gray-500;
            border: 7px solid;
            border-radius: 10px;
            margin-bottom: $spacing-4;
        }

        h2 {
            font-size: $font-size-xl;
            margin: 0;
            color: $color-palette-gray-700;
        }

        span {
            display: block;
        }

        button {
            margin-top: $spacing-3;
        }
    }

    .dot-icon-button {
        border-radius: 50%;
        height: $action-button-height;
        width: $action-button-height;
        display: inline-flex;
        justify-content: center;
        border: none;
        background-color: $color-palette-primary;
        box-shadow: $shadow-xs;
        outline: none;
        align-items: center;

        &:hover {
            background: $color-palette-primary-400;
            box-shadow: $shadow-s;
        }

        &:active,
        &:focus {
            background: $color-palette-primary-400;
        }

        i {
            color: $white;
            font-size: $font-size-lg;
        }
    }
}
