@use "../base/variables" as *;

.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
}

@media (min-width: 768px) {
    .container {
        max-width: $screen-sm;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: $screen-md;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: $screen-lg;
    }
}

.connection-layout {
    background-color: #fff;
    padding: 0 40px;
    margin-top: 40px;
    overflow-y: auto;
    max-height: calc(100vh - 140px);
    counter-reset: step 0;

    .step {
        display: flex;
        counter-increment: step;

        .step-number {
            width: 75px;
            height: 75px;
            color: #333;
            font-size: 64px;
            font-weight: 600;
            line-height: 64px;
            text-align: center;
            margin: 20px 20px 0 0;
            border: solid 5px #333;
            border-radius: 100%;
            min-width: 75px;

            &::before {
                content: counter(step);
            }
        }

        &.hidden {
            display: none;
        }

        &.completed .step-number::after {
            content: "";
            background: url('/images/checkmark.svg');
            position: relative;
            display: block;
            top: 20px;
            width: 50px;
            height: 50px;
            filter: drop-shadow(2px 2px 2px #888);
        }
    }
}

@media (max-width: $screen-xs-max) {
    .connection-layout {
        max-height: calc(100vh - 100px);
        padding: 20px;

        .step {
            .step-number {
                width: 50px;
                height: 50px;
                font-size: 36px;
                line-height: 36px;
                min-width: 50px;
            }
        }
    }
}