.new-api-gateway-wizard {
    .new-api-gateway-wizard-color-set();

    .content-wrapper {
        .content {
            .toast-status-panel {
                max-width: 90vw;
                margin: 16px auto 20px;
            }

            .api-gateway-form {
                .content-body {
                    margin: 0 auto;
                    height: 400px;
                    display: flex;
                    flex-flow: row nowrap;
                    justify-content: center;
                    align-items: center;

                    .api-gateway-block {
                        flex: none;
                        position: relative;
                        max-width: 320px;
                        padding: 16px 24px;
                        border: @api-gateway-block-border;
                        border-radius: 2px;
                        background-color: @api-gateway-block-bg-color;
                        box-shadow: 0 3px 4px rgba(0, 0, 0, 0.18);
                        transition: box-shadow .3s ease-in-out 0s;

                        // important for not waiting to animation to finish when removing/promoting canary function
                        // (`ng-leave` and `ng-leave-active` are assigned by the `ng-if` directive when its scope
                        // expression evaluates to a falsy value) see https://docs.angularjs.org/api/ng/directive/ngIf
                        &.ng-leave.ng-leave-active {
                            transition: none 0s 0s;
                        }

                        &:hover, &:focus-within {
                            box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
                        }

                        .block-title {
                            text-align: center;
                            font-weight: bold;
                            font-size: 16px;
                            color: @api-gateway-block-title-font-color;
                            margin-bottom: 16px;
                        }
                    }

                    .connector, .connector-split {
                        flex: 1 1 0;
                        border-top: 1px solid @connector-line-stroke-color;
                    }

                    .connector-split {
                        border-left: 1px solid @connector-line-stroke-color;
                        border-bottom: 1px solid @connector-line-stroke-color;
                        border-radius: 50px 0 0 50px;
                        height: 280px;
                    }

                    .api-gateway-globe {
                        flex: none;
                        width: 128px;
                        height: 128px;
                        background: url('/assets/images/globe.png') center center / cover no-repeat transparent;
                    }

                    .api-gateway-authentication,
                    .api-gateway-basic-settings {
                        .fields-wrapper {
                            display: flex;
                            flex-flow: column nowrap;
                            justify-content: space-around;

                            .field-wrapper {
                                display: flex;
                                flex-flow: row nowrap;
                                justify-content: space-between;
                                line-height: 36px;
                                margin-top: 16px;

                                &:first-child {
                                    margin-top: 0;
                                }

                                .field-label {
                                    width: 35%;
                                }

                                .field-input {
                                    width: 60%;
                                }
                            }
                        }
                    }

                    .api-gateway-basic-settings {
                        .end-point-block {
                            margin-top: 8px;

                            .end-point-title {
                                font-weight: bold;
                            }

                            .end-point-host {
                                display: flex;
                                flex-flow: row nowrap;
                                align-items: center;

                                .host {
                                    flex: auto;
                                    word-break: break-all;
                                    max-height: 80px;
                                    overflow-y: auto;
                                }

                                .copy-to-clipboard {
                                    flex: none;
                                }
                            }
                        }
                    }

                    .api-gateway-circles {
                        display: flex;
                        flex-flow: column nowrap;
                        justify-content: space-between;
                        align-items: center;
                        position: relative;

                        &.only-primary {
                            justify-content: center;
                        }

                        .api-gateway-block {
                            border-radius: 35px;

                            &.function-circle {
                                width: 320px;

                                &.canary-function {
                                    .canary-title {
                                        margin-top: 20px;
                                        margin-bottom: 0;
                                    }

                                    .canary-action-menu {
                                        position: absolute;
                                        top: 24px;
                                        right: 0;
                                    }
                                }

                                .function-name {
                                    position: relative;

                                    &.percentage-exists {
                                        padding-left: 36px;
                                    }

                                    .percentage {
                                        position: absolute;
                                        left: -17px;
                                        top: -4px;
                                        width: 44px;
                                        height: 44px;

                                        .percentage-background {
                                            position: absolute;
                                            width: 110%;
                                            height: 110%;
                                            background-color: @api-gateway-percentage-background-color;
                                            border-radius: 50% 50% 0 50%;
                                            transform: rotate(45deg);
                                        }

                                        &.swap {
                                            top: -8px;

                                            .percentage-background {
                                                border-radius: 50% 0 50% 50%;
                                                transform: rotate(-45deg);
                                            }
                                        }

                                        .percentage-value {
                                            position: absolute;
                                            top: 5px;
                                            left: 2px;
                                            width: 100%;
                                            height: 36px;
                                            line-height: 36px;
                                            text-align: center;
                                            color: @api-gateway-percentage-value-font-color;

                                            &:after {
                                                content: '%';
                                            }
                                        }
                                    }
                                }

                                .function-name-title {
                                    vertical-align: middle;
                                    line-height: normal;
                                }
                            }
                        }

                        .create-canary-button {
                            position: absolute;
                            bottom: -40px;
                            .igz-icon-add-round {
                                margin: 0 8px 0 0;
                            }
                        }

                        .primary-canary-slider {
                            z-index: 1;
                            height: 175px;
                            width: 100%;
                            display: flex;
                            justify-content: flex-start;
                            margin-left: 20px;

                            .rzslider:not([disabled]).rz-vertical {
                                .rz-bar {
                                    background-color: @dark-sky-blue;
                                    border-radius: 0;
                                }

                                .rz-pointer {
                                    width: 27px;
                                    height: 27px;
                                    background-color: @white;
                                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24);
                                    border-radius: 50%;
                                    left: -11px !important;
                                    outline: 0 none transparent;

                                    &::after {
                                        top: 11px;
                                        left: 11px;
                                        width: 5px;
                                        height: 5px;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .buttons-wrapper {
                position: relative;
                width: 100%;
                margin-top: 32px;
            }
        }
    }
}