.wrapper {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
    position: relative;
}

.installer-box {
    height: 560px;
    width: 850px;
    min-width: 850px;
    margin: 50px 0;
    background: #f1f5f9;
    border: 5px solid $color-slate-100;
    border-radius: 10px;
    box-shadow: 0 10px 50px -3px rgb(0, 0, 0, 0.1);
    position: relative;
    z-index: 10;
}

.installer-left-sidebar {
    width: 260px;
    min-width: 260px;
    padding: 25px 20px 10px 16px;
    background: $color-slate-100;

    .logo {
        svg {
            height: 65px;
            width: 65px;
        }
    }

    .step-list {
        margin: 45px 0 auto;
    }

    .step-list-item {
        margin-bottom: 25px;
        z-index: 0;

        &:last-child {
            margin-bottom: 0;
        }

        &:not(:last-child):before,
        &:not(:last-child):after {
            content: "";
            position: absolute;
            left: 10px;
            top: 20px;
            width: 2px;
        }

        &:not(:last-child):before {
            height: 130%;
            background: $color-slate-300;
            opacity: 0.4;
            z-index: -20;
        }

        &:not(:last-child):after {
            height: 0%;
            background: $color-primary-500;
            opacity: 0.3;
            transition: 300ms ease-out;
            z-index: -10;
        }

        &.active {
            .icon {
                color: $color-primary-500;
                background: $color-slate-100;
                border-color: $color-primary-500;

                svg {
                    path {
                        fill: $color-primary-500;
                    }
                }
            }

            .title {
                color: $color-gray-800;
            }

            .excerpt {
                color: $color-gray-500;
            }
        }

        &.complete {
            &:not(:last-child):after {
                height: 130%;
            }

            .icon {
                color: #ffffff;
                background: $color-primary-500;
                border-color: $color-primary-500;

                svg {
                    width: 12px;
                    height: 12px;

                    path {
                        fill: #ffffff;
                    }
                }
            }
        }

        .icon {
            height: 22px;
            width: 22px;
            min-width: 22px;
            margin: 1px 15px 0 0;
            color: darken($color-slate-300, 10%);
            background: $color-slate-100;
            border: 2px solid $color-slate-300;
            transition: $transition-default;

            svg {
                height: 22px;
                width: 22px;

                path {
                    fill: darken($color-slate-300, 10%);
                }
            }
        }

        .cursor-pointer {
            .title {
                cursor: pointer;
            }
        }

        .title {
            margin-bottom: 4px;
            color: $color-gray-500;
        }

        .excerpt {
            font-size: 13px;
            color: $color-gray-400;
        }
    }

    .app-version {
        font-size: 13px;
        font-weight: $font-medium;
        color: $color-gray-500;
        display: flex;
        align-items: center;
    }
}

.installer-main-content {
    padding: 20px;
    border-radius: 0 $radius-default 0 0;
    background: $color-white;
    border-radius: 10px;
    margin: 10px;
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px,
        rgba(17, 17, 26, 0.05) 0px 0px 8px;

    .header {
        margin-bottom: 20px;

        h3 {
            margin-bottom: 5px;
        }

        .excerpt {
            color: lighten(#4b5563, 15%);
        }
    }

    .has-scrollable-content {
        height: calc(100% - 50px);
    }

    .content {
        border: 1px solid $color-slate-200;
        border-radius: $radius-default;
        height: 339px;
        padding: 4px 2px;
    }

    .scrollable-content {
        height: 100%;
        overflow-y: auto;
        padding: 4px 15px;

        &::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        &::-webkit-scrollbar-track {
            background: transparent;
        }

        &::-webkit-scrollbar-thumb,
        &::-webkit-scrollbar-thumb:hover {
            background: #e5eaf0;
            border-radius: 3px;
        }
    }

    .box {
        &:last-child {
            .table {
                margin-bottom: 0;
            }
        }

        .table {
            margin-bottom: 10px;

            .mdi {
                font-size: 22px;
            }

            svg {
                width: 22px;
                height: 22px;

                path {
                    fill: $color-green-500;
                }
            }

            .mdi-checkbox-marked-circle {
                path {
                    fill: $color-green-500;
                }
            }

            .mdi-close-circle {
                path {
                    fill: $color-red-500;
                }
            }
        }
    }

    .configuration {
        .scrollable-content {
            padding: 10px 15px 0;
        }

        .alert {
            margin-top: 5px;
        }
    }

    .configuration-form {
        .box {
            margin-bottom: 10px;

            &:last-child {
                margin-bottom: 0;

                > div {
                    &:last-child {
                        margin-bottom: 15px;
                    }
                }
            }
        }

        .title {
            margin-bottom: 15px;
        }
    }

    .complete {
        height: 100%;

        .check-icon {
            width: 80px;
            height: 80px;
            position: relative;
            margin-bottom: 25px;
            border-radius: $radius-full;
            box-sizing: content-box;
            border: 4px solid $color-primary-500;

            &::before {
                top: 3px;
                left: -2px;
                width: 30px;
                transform-origin: 100% 50%;
                border-radius: 100px 0 0 100px;
            }

            &::after {
                top: 0;
                left: 30px;
                width: 60px;
                transform-origin: 0 50%;
                border-radius: 0 100px 100px 0;
                animation: rotate-circle 4.25s ease-in;
            }

            &::before,
            &::after {
                content: "";
                height: 100px;
                position: absolute;
                background: $color-white;

                transform: rotate(-45deg);
            }

            .icon-line {
                height: 5px;
                background-color: $color-primary-500;
                display: block;
                border-radius: 2px;
                position: absolute;
                z-index: 10;

                &.line-tip {
                    top: 46px;
                    left: 14px;
                    width: 25px;
                    transform: rotate(45deg);
                    animation: icon-line-tip 0.75s;
                }

                &.line-long {
                    top: 38px;
                    right: 8px;
                    width: 47px;
                    transform: rotate(-45deg);
                    animation: icon-line-long 0.75s;
                }
            }

            .icon-circle {
                top: -4px;
                left: -4px;
                z-index: 10;
                width: 80px;
                height: 80px;
                border-radius: $radius-full;
                position: absolute;
                box-sizing: content-box;
                border: 4px solid rgba(0, 104, 225, 0.5);
            }

            .icon-fix {
                top: 8px;
                width: 5px;
                left: 26px;
                z-index: 1;
                height: 85px;
                position: absolute;
                transform: rotate(-45deg);
                background-color: $color-white;
            }
        }

        .title {
            margin-bottom: 50px;
            animation-delay: 1s;
        }

        .links {
            animation-delay: 1.3s;

            li {
                &:last-child {
                    margin-left: 30px;
                }
            }
        }

        .link {
            height: 135px;
            width: 150px;
            text-decoration: none;
            background: $color-slate-100;
            border: 1px solid #eef2f6;
            border-radius: $radius-default;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: $transition-default;

            svg {
                width: 60px;
                height: 60px;
                transition: $transition-default;

                path {
                    fill: lighten($color-slate-600, 3%);
                    transition: $transition-default;
                }
            }

            b {
                color: $color-slate-500;
                transition: $transition-default;
            }

            &:hover {
                background: $color-primary-500;
                border-color: $color-primary-500;

                svg {
                    path {
                        fill: #ffffff;
                    }
                }

                .mdi,
                b {
                    color: $color-white;
                }
            }
        }
    }

    .footer {
        margin-top: 15px;

        .btn-light {
            margin-right: 10px;
        }
    }
}

@keyframes rotate-circle {
    0% {
        transform: rotate(-45deg);
    }

    5% {
        transform: rotate(-45deg);
    }

    12% {
        transform: rotate(-405deg);
    }

    100% {
        transform: rotate(-405deg);
    }
}

@keyframes icon-line-tip {
    0% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    54% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }

    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }

    100% {
        width: 25px;
        left: 14px;
        top: 45px;
    }
}

@keyframes icon-line-long {
    0% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    65% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    84% {
        width: 55px;
        right: 0px;
        top: 35px;
    }

    100% {
        width: 47px;
        right: 8px;
        top: 38px;
    }
}

@include media-breakpoint-down(lg) {
    .installer-box {
        width: 100%;
        min-width: 0;
    }
}

@include media-breakpoint-down(md) {
    html,
    body {
        height: auto;
    }

    .installer-box {
        height: auto;
        margin: 15px 0;
    }

    .installer-left-sidebar {
        width: 100%;
        min-width: 0;
        padding: 20px 15px !important;

        .step-list {
            margin: 40px 0 40px -2px;
        }
    }

    .installer-main-content {
        padding: 15px 15px 20px;

        .has-scrollable-content {
            height: auto;
        }

        .content {
            height: 430px;
        }

        .configuration-form {
            .title {
                margin-bottom: 12px;
            }

            &.form-horizontal {
                .form-group {
                    margin-bottom: 14px;
                }
            }

            .col-form-label {
                margin-bottom: 5px;
                padding-top: 0;
                padding-bottom: 0;
            }
        }

        .complete {
            padding: 40px 0;

            .title {
                font-size: 1.25rem;
                line-height: 1.75rem;
                margin-bottom: 40px;
            }

            .links {
                li:last-child {
                    margin-left: 20px;
                }
            }

            .link {
                height: 100px;
                width: 110px;

                .mdi {
                    font-size: 36px;
                    margin-top: 8px;
                }
            }
        }

        .footer {
            margin-top: 15px;

            button {
                padding-top: 5px !important;
                padding-bottom: 5px !important;
            }
        }
    }
}