$primary-color: #24b0a6;
$hover-color: #19837c;
$border-color: #00a7e5;
$border-hover-color: #19837c;
$progress-color: #2576a4;

$item-current-color: #df7739;
$item-completed-color: #6ab255;

.feedback-wrapper {
    // z-index: 600000;
    position: relative;
}

.redux-templates-feedback {
    padding: 20px;
    width: 600px;
    .panel {
        display: flex;
        flex-direction: column;
        flex: 1;
        transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
        max-height: 300px;
        opacity: 1;
        &.fade {
            max-height: 0;
            opacity: 0;
        }
        .field {
            display: flex;
            margin-bottom: 15px;
            align-items: center;
            &.top {
                align-items: top;
            }
            label {
                margin-right: 15px;
            }
            label + input,
            textarea {
                padding: 5px 10px;
                width: 375px;
            }
            input[type="checkbox"],
            input[type="radio"] {
                margin-top: 0;
                margin-right: 0.5rem;
            }
        }
        button {
            align-self: center;
            margin-top: 1rem;
        }
    }
    h4 {
        margin: 0.5rem 0;
    }
    .error-panel {
        color: #f00;
        margin-bottom: 10px;
    }
}
.redux-templates-feedback-modal-wrapper {
    display: flex;
    flex-direction: column;
    background: #fff;
    .redux-templates-modal-header {
        border-bottom: 1px solid #ddd;
        width: 100%;
        flex: 0 0 60px;
        padding: 10px 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;

        h3 {
            margin: 0;
            font-size: 1.2rem;
        }

        button {
            border: none;
            cursor: pointer;
        }

        .redux-templates-modal-close {
            font-size: 20px;
            background: transparent;
            color: #9b9b9b;
        }

    }
}

.feedback-popup-wrapper {
    border-radius: 4px;
}

.less-margin .feedback-popup-content {
    padding: 20px 25px;
}
.feedback-popup-content {
    box-sizing: border-box;
    padding: 30px 40px;
    -webkit-font-smoothing: antialiased;
}

.feedback-popup-content h3 {
    color: $primary-color;
    margin: 0 0 20px;
    font-size: 24px;
    font-family: "Helvetica Neue";
    font-weight: 500;
}

.feedback-popup-content p {
    font-size: 16px;
    margin: 0 0 22px;
}

.feedback-popup-content b {
    font-weight: 500;
}

.feedback-popup-content textarea {
    box-shadow: none;
    resize: none;
    margin-bottom: 21px;
    width: 100%;
    min-height: 100px;
}

.feedback-popup-content label {
    font-size: 13.8px;
    display: block;
    margin-bottom: 23px;
}

.feedback-popup-content input[type="checkbox"] {
    margin-right: 8px;
}

.feedback-popup-content .rating-stars {
    color: #fdb72c;
    font-size: 18px;
    font-weight: bold;
}

.feedback-popup-close .fa-times {
    font-size: 20px;
    color: #777;
    float: right;
    margin: 15px;
    border-radius: 50%;
    cursor: pointer;
}

.feedback-popup-btn {
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    box-shadow: none;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 25px;
    border: 1px solid $border-color;
    background-color: $primary-color;
    color: #fff;

    &:hover {
        border: 1px solid $border-hover-color;
        background-color: $hover-color;
        color: #fff;
    }

    .dashicons-external {
        margin-left: 6px;
    }
}

.feedback-popup-content {
    p {
        font-size: 14px;
    }
    textarea {
        margin-bottom: 10px;
    }
    label {
        font-size: 13px;
        margin-bottom: 15px;
    }
    .components-base-control .components-base-control__field {
        display: flex;
    }
    .error-message {
        color: #f00;
    }
}

.redux-templates-modal-wrapper.feedback-popup-wrapper {
    height: auto;
}

.feedback-popup-content {
    label.control-label {
        margin-bottom: 5px;
    }
    .form-group.field {
        margin-bottom: 10px;
    }
    .fixed-control {
        input,
        select {
            width: 100%;
        }
    }
}


.feedback-popup-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 130px;
    width: 100%;
    background-color: #eee;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;

    .header-background {
        width: 75px;
        height: 75px;
    }
    i.header-icon {
        font-size: 50px;
    }

    .feedback-popup-close {
        position: absolute;
        top: 5px;
        right: 5px;
    }
}

.feedback-popup-content {
    .col-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        form {
            width: 100%;
        }
    }


    .redux-templates-block-preview-hover {
        position: absolute;
        z-index: 9;
        cursor: default;
        height: 100%;
        background: transparent;
        right: 0;
        bottom: 0;
        left: 0;
        top: 0;
    }
    .preview-panel {
        height: 250px;
        overflow-y: auto;
        overflow-x: hidden;
        cursor: default;
        background: #fff;
        position: relative;
        margin: 0 0 0 20px;
        outline: 3px solid transparent;
        -webkit-transition: outline 0.3s ease-in-out;
        transition: outline 0.3s ease-in-out;
        -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
        border-radius: 3px;
    }
}