$prefix: wpz-onboard_;
$primary-color: #3496ff;
$secondary-color: scale-color($primary-color, $lightness: 25%);
$light-color: #fff;
$dark-color: #000;
$medium-color: #1d2327;
$grey-color: #ddd;
$dark-grey-color: #666;
$bluish-grey-color: #81909c;
$dark-blue-color: #2271b1;
$green-color: #22bb66;
$yellow-color: #f0c33c;
$orange-color: #f57c00;
$danger-color: #d84b4b;

.#{$prefix}wrapper {
    padding: 30px 20px 0 0;
}

// Hide uneeded notices.
.wpzoom_page_wpzoom-license div#setting-error-tgmpa,
.wpzoom_page_wpzoom-license .update-nag,
.wpzoom_page_wpzoom-license .notice,
.wpzoom_page_wpzoom-license div.error {
    display: none;
}

.wp-core-ui .#{$prefix}wrapper {
    input[type="text"],
    textarea {
        padding-top: 4px;
        padding-bottom: 4px;
        border: 1px solid $grey-color;
        border-radius: 2px;
        transition: all 0.3s ease;

        &:hover,
        &:focus {
            border-color: $primary-color;
            box-shadow: none;
        }
    }

    a {
        &:focus {
            box-shadow: none;
            outline: none;
        }
    }

    input[type="checkbox"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: inherit;
        background-color: $light-color;
        height: 1.25rem;
        width: 1.25rem;
        border: 1px solid $dark-color;
        border-radius: 2px;
        transition: all 0.3s ease;

        &:hover {
            background-color: $secondary-color;
            border-color: $dark-blue-color;
        }

        &:focus {
            outline: none;
            box-shadow: none;
        }

        &::before {
            transition: all 0.3s ease;
        }

        &:checked {
            color: $light-color;
            background-color: $primary-color;
            border-color: transparent;
        }

        &:checked::before {
            content: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2214%22%20height%3D%2212%22%20viewBox%3D%220%200%2014%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.779%201.00004L5.3618%2010.9753L1.06089%207.77735%22%20stroke%3D%22white%22%20stroke-width%3D%221.2%22%2F%3E%3C%2Fsvg%3E%0A");
            display: block;
            float: none;
            height: auto;
            width: auto;
            margin: 0;
        }

        &:disabled {
            pointer-events: none;
            background-color: rgba($dark-color, 0.2);
        }
    }

    .button {
        display: inline-flex;
        align-items: center;
        font-weight: 600;
        color: $light-color;
        background-color: $primary-color;
        padding: 3px 13px;
        border: none;
        transition: all 0.3s ease;

        &:hover,
        &:active,
        &:focus {
            color: $light-color;
            background-color: $secondary-color;
        }

        &.button-secondary {
            color: $primary-color;
            background-color: transparent;

            &:hover,
            &:active,
            &:focus {
                background-color: rgba($primary-color, 0.1);
            }
        }

        &.button-smaller {
            display: inline-flex;
            align-items: center;
            padding-left: 6px;
            padding-right: 6px;
        }

        &.button-danger {
            color: $light-color;
            background-color: $danger-color;
    
            &:hover,
            &:active,
            &:focus {
                color: $light-color;
                background-color: rgba($danger-color, 0.8);
                outline: none;
            }
        }

        > .icon-text {
            display: block;
            text-indent: -999em;
            height: 0;
            width: 0;
            overflow: hidden;
        }
    }
}

.#{$prefix}wrapper {
    color: $dark-color;

    p {
        color: $dark-grey-color;
    }

    .#{$prefix}header,
    .#{$prefix}content .#{$prefix}content-main,
    .#{$prefix}content .#{$prefix}content-side .#{$prefix}content-side-section,
    .#{$prefix}content-container,
    .#{$prefix}footer {
        background-color: $light-color;
        border: 1px solid $grey-color;
        border-radius: 3px;
        box-shadow: 0 3px 2px -2px rgba($dark-color, 0.08);
    }

    .#{$prefix}notice {
        background-color: rgba($yellow-color, 0.1);
        padding: 16px 20px;
        border: 1px solid $yellow-color;
        border-radius: 4px;
        margin: 0;

        > * {
            margin: 0;
        }
    }

    .#{$prefix}header {
        padding: 5px 30px 0;
        margin: 0 0 30px;

        .#{$prefix}title-wrapper {
            display: flex;
            align-items: baseline;
            line-height: 1.8;

            .#{$prefix}title {
                flex-grow: 1;
                padding: 0;
                margin: 0;

                small {
                    margin: 0 0 0 0.5em;
                }
            }

            .#{$prefix}title small,
            .#{$prefix}framework-version {
                font-size: 14px;
                font-weight: normal;
                color: $bluish-grey-color;
            }

            .#{$prefix}framework-version {
                padding: 0;
                margin: 0;
            }
        }

        .#{$prefix}tabs {
            display: flex;
            padding: 0;
            margin: 0;
            overflow: hidden;

            li {
                position: relative;
                padding: 0;
                margin: 0 50px 0 0;

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

                &::after {
                    content: "";
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: $primary-color;
                    height: 6px;
                    border-top-left-radius: 2px;
                    border-top-right-radius: 2px;
                    opacity: 0;
                    transform: translateY(100%);
                    transition: all 0.3s ease;
                }

                &.active::after {
                    opacity: 1;
                    transform: none;
                }

                a {
                    font-size: 18px;
                    font-weight: 500;
                    text-decoration: none;
                    line-height: 1.8;
                    padding: 0.6em 0;
                    display: block;
                    color: $medium-color;
                    outline: none;
                    box-shadow: none;
                    transition: all 0.3s ease;

                    &:hover {
                        color: $dark-blue-color;
                    }

                    span[class^="license-status-"]:not(.license-status-valid-badge) {
                        position: absolute;
                        top: 10px;
                        right: -12px;
                        width: 10px;
                        height: 10px;
                        border-radius: 10px;
                        background-color: $orange-color;
                    }
                }

                &.active a {
                    cursor: default;
                    color: $medium-color;
                }
            }
        }
    }

    .#{$prefix}content-wrapper {
        > div {
            position: relative;
            pointer-events: none;
            opacity: 0;
            transition: all 0.3s ease;

            &.active {
                z-index: 2;
                pointer-events: all;
                opacity: 1;
            }
        }

        .#{$prefix}content {
            .#{$prefix}content-main {
                display: grid;
                flex-grow: 3;
                padding: 25px 30px;
                margin: 0;

                .#{$prefix}content-main-tab {
                    grid-column: 1;
                    grid-row: 1;
                    pointer-events: none;
                    opacity: 0;
                    transition: all 0.3s ease;

                    &.active {
                        pointer-events: all;
                        opacity: 1;
                    }
                }

                .#{$prefix}content-main-title {
                    font-size: 24px;
                    padding: 0;
                    margin: 0 0 15px;
                }

                .#{$prefix}content-main-quickstart {
                    // This is used for onboarding pointer.
                    .#{$prefix}content-main-title {
                        display: inline-block;
                        padding-right: 20px;
                    }
                }

                .#{$prefix}content-main-intro {
                    padding: 0;
                    margin: 0 0 24px;
                }

                .#{$prefix}content-main-steps {
                    counter-reset: steps;
                    list-style: none;
                    padding: 0;
                    margin: 0;

                    .#{$prefix}content-main-step {
                        padding: 0 0 60px;
                        border-bottom: 1px solid $grey-color;
                        margin: 0 0 60px;

                        &:last-child {
                            padding-bottom: 0;
                            border-bottom: none;
                            margin-bottom: 0;
                        }

                        .#{$prefix}content-main-step-title {
                            display: flex;
                            align-items: center;
                            font-size: 20px;
                            font-weight: 600;
                            padding: 0;
                            margin: 0 0 15px;

                            &::before {
                                counter-increment: steps;
                                content: counter(steps);
                                display: inline-flex;
                                align-items: center;
                                justify-content: center;
                                font-size: 20px;
                                font-weight: 600;
                                line-height: 1;
                                height: 30px;
                                width: 30px;
                                padding: 0;
                                border: 1px solid $dark-color;
                                border-radius: 100%;
                                margin: 0 15px 0 0;
                            }
                        }

                        .#{$prefix}content-main-step-intro {
                            padding: 0;
                            margin: 0 0 25px;
                        }

                        .#{$prefix}content-main-step-content ul {
                            padding: 0;
                            margin: 0;

                            li {
                                padding: 0 0 0 2rem;
                                margin: 0 0 20px;

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

                                h5 {
                                    position: relative;
                                    font-size: 14px;
                                    font-weight: 600;
                                    padding: 0;
                                    margin: 0 0 5px;

                                    label {
                                        vertical-align: inherit;

                                        input {
                                            position: absolute;
                                            left: -2rem;
                                            margin: 0;
                                        }
                                    }
                                }

                                p {
                                    padding: 0;
                                    margin: 0;
                                }
                            }
                        }

                        &.step-install-plugins {
                            form {
                                position: relative;

                                .plugins-list > li {
                                    .plugin-name {
                                        .plugin-badge {
                                            font-size: 11px;
                                            font-weight: 600;
                                            font-style: normal;
                                            text-transform: uppercase;
                                            line-height: 1;
                                            color: $dark-grey-color;
                                            background-color: rgba(
                                                $dark-color,
                                                0.05
                                            );
                                            padding: 2px 10px;
                                            border: 1px solid
                                                rgba($dark-color, 0.2);
                                            border-radius: 50px;
                                            margin: 0 0 0 1em;
                                        }
                                    }

                                    &.plugin-status_active {
                                        input[type="checkbox"] {
                                            background-color: $green-color;
                                            border-radius: 100%;
                                            opacity: 1;

                                            &::before {
                                                content: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2212%22%20height%3D%2210%22%20viewBox%3D%220%200%2014%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.779%201.00004L5.3618%2010.9753L1.06089%207.77735%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E%0A");
                                                opacity: 1;
                                            }
                                        }

                                        .plugin-name {
                                            .plugin-badge {
                                                color: $green-color;
                                                background-color: rgba(
                                                    $green-color,
                                                    0.1
                                                );
                                                border-color: $green-color;
                                            }
                                        }
                                    }

                                    &.plugin-status_not-installed {
                                        .plugin-name {
                                            .plugin-badge {
                                                color: $dark-grey-color;
                                                background-color: rgba(
                                                    $dark-color,
                                                    0.05
                                                );
                                                border: 1px solid
                                                    rgba($dark-color, 0.2);
                                            }
                                        }
                                    }

                                    &.plugin-status_installed-not-activated {
                                        .plugin-name {
                                            .plugin-badge {
                                                color: $yellow-color;
                                                background-color: rgba(
                                                    $yellow-color,
                                                    0.1
                                                );
                                                border-color: $yellow-color;
                                            }
                                        }
                                    }

                                    &.plugin-level_recommended {
                                        .plugin-name {
                                            .plugin-badge:last-child {
                                                color: $bluish-grey-color;
                                                background-color: transparent;
                                                border-color: transparent;
                                                text-transform: initial;
                                                font-size: 13px;
                                                font-weight: 400;
                                                padding-left: 0;

                                                &::before {
                                                    content: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.49991 3.75001C7.17633 3.75001 6.91403 4.0123 6.91403 4.33589C6.91403 4.65947 7.17633 4.92177 7.49991 4.92177L7.50021 4.92177C7.82379 4.92177 8.08594 4.65947 8.08594 4.33589C8.08594 4.0123 7.8235 3.75001 7.49991 3.75001Z' fill='%2381909C'/%3E%3Cpath d='M6.91442 6.38649L6.91442 10.6927C6.91442 11.0163 7.17672 11.2786 7.5003 11.2786C7.82389 11.2786 8.08618 11.0163 8.08618 10.6927L8.08618 6.38649C8.08618 6.0629 7.82389 5.80061 7.5003 5.80061C7.17672 5.80061 6.91442 6.0629 6.91442 6.38649Z' fill='%2381909C'/%3E%3Cpath d='M14.375 7.5C14.375 11.297 11.297 14.375 7.5 14.375C3.70304 14.375 0.625 11.297 0.625 7.5C0.625 3.70304 3.70304 0.625 7.5 0.625C11.297 0.625 14.375 3.70304 14.375 7.5Z' stroke='%2381909C' stroke-width='1.25'/%3E%3C/svg%3E%0A");
                                                    display: inline-block;
                                                    vertical-align: middle;
                                                    float: none;
                                                    height: auto;
                                                    width: auto;
                                                    margin: 0;
                                                    margin-right: 5px;
                                                }
                                            }
                                        }
                                    }

                                    &.plugin-level_required {
                                        .plugin-name {
                                            .plugin-badge:last-child {
                                                color: $orange-color;
                                                background-color: transparent;
                                                border-color: transparent;
                                                text-transform: initial;
                                                font-size: 13px;
                                                font-weight: 400;
                                                padding-left: 0;

                                                &::before {
                                                    content: url("data:image/svg+xml,%3Csvg width='18' height='15' viewBox='0 0 18 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.32837 11.9881C9.32837 12.3492 9.03564 12.642 8.6745 12.642C8.31336 12.642 8.02047 12.3492 8.02047 11.9881C8.02047 11.6269 8.31304 11.3342 8.67417 11.3342H8.6745C9.03564 11.3342 9.32837 11.627 9.32837 11.9881Z' fill='%23F57C00' stroke='%2381909C' stroke-width='0.0404494'/%3E%3Cpath d='M9.32795 4.67409V9.62871C9.32795 9.98984 9.03522 10.2826 8.67409 10.2826C8.31296 10.2826 8.02022 9.98984 8.02022 9.62871V4.67409C8.02022 4.31296 8.31296 4.02022 8.67409 4.02022C9.03522 4.02022 9.32795 4.31296 9.32795 4.67409Z' fill='%23F57C00' stroke='%2381909C' stroke-width='0.0404494'/%3E%3Cpath d='M10.4158 1.60686L16.3599 11.4699C17.1164 12.7251 16.199 14.375 14.5733 14.375H2.68511C1.05945 14.375 0.142021 12.7251 0.898504 11.4699L6.8426 1.60685C7.63158 0.297715 9.62685 0.297715 10.4158 1.60686Z' stroke='%23F57C00' stroke-width='1.25'/%3E%3C/svg%3E%0A");
                                                    display: inline-block;
                                                    vertical-align: middle;
                                                    float: none;
                                                    height: auto;
                                                    width: auto;
                                                    margin: 0;
                                                    margin-right: 5px;
                                                }
                                            }
                                        }
                                    }

                                    &.plugin-is-installing {
                                        input[type="checkbox"] {
                                            background: none;
                                            border-radius: 100%;
                                            box-shadow: inset 0 0 0 4px
                                                rgba($green-color, 0.2);
                                            opacity: 1;

                                            &::before {
                                                content: "";
                                                height: 100%;
                                                width: 100%;
                                                border-radius: 100%;
                                                box-shadow: inset 0 0 0 4px
                                                    $green-color;
                                                clip-path: inset(0 50% 0 0);
                                                animation: rotation 2s infinite
                                                    linear;
                                                opacity: 1;
                                            }
                                        }
                                    }

                                    &.no-required-plugins {
                                        padding-left: 0;
                                        opacity: 0.7;
                                    }
                                }

                                .button {
                                    margin-top: 20px;
                                }
                            }
                        }

                        &.step-choose-design {
                            form {
                                ul {
                                    display: grid;
                                    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                                    gap: 60px;
                                    padding: 0;
                                    margin: 0;

                                    li {
                                        padding: 0;
                                        margin: 0;

                                        figure {
                                            margin: 0;
                                            padding: 0;

                                            .preview-thumbnail {
                                                position: relative;
                                                background-color: rgba(
                                                    $dark-color,
                                                    0.05
                                                );
                                                background-size: cover;
                                                background-position: top center;
                                                width: 100%;
                                                padding-top: 97.5%;
                                                border-radius: 4px;
                                                box-shadow: inset 0 0 0 1px
                                                        rgba($dark-color, 0.05),
                                                    0 10px 10px
                                                        rgba($dark-color, 0.1);
                                                overflow: hidden;
                                                cursor: pointer;
                                                margin: 0 0 20px;
                                                transition: all 0.2s ease;

                                                .button-select-template {
                                                    position: absolute;
                                                    cursor: pointer;
                                                    top: 50%;
                                                    left: 50%;
                                                    z-index: 3;
                                                    font-size: 13px;
                                                    color: $light-color;
                                                    background-color: $primary-color;
                                                    border: none;
                                                    outline: none;
                                                    padding: 9px;
                                                    text-align: center;
                                                    width: 80%;
                                                    border-radius: 2px;
                                                    transform: translate(
                                                        -50%,
                                                        -50%
                                                    );
                                                    opacity: 0;
                                                    transition: all 0.2s ease;
                                                }

                                                &::before {
                                                    content: "";
                                                    position: absolute;
                                                    top: 0;
                                                    left: 0;
                                                    right: 0;
                                                    bottom: 0;
                                                    z-index: 2;
                                                    background-color: rgba(
                                                        $dark-color,
                                                        0.5
                                                    );
                                                    opacity: 0;
                                                    transition: all 0.2s ease;
                                                }

                                                .#{$prefix}dot-elastic {
                                                    position: absolute;
                                                    bottom: 15px;
                                                    left: 50%;
                                                    margin-left: -5px;
                                                    z-index: 5;
                                                }
                                                .#{$prefix}dot-elastic,
                                                .#{$prefix}dot-elastic::before,
                                                .#{$prefix}dot-elastic::after {
                                                    width: 8px;
                                                    height: 8px;
                                                }
                                            }

                                            &:hover {
                                                .preview-thumbnail {
                                                    &::before {
                                                        opacity: 1;
                                                    }

                                                    .button-select-template {
                                                        opacity: 1;
                                                    }
                                                }
                                            }

                                            figcaption {
                                                position: relative;
                                                h5 {
                                                    font-size: 18px;
                                                    font-weight: 600;
                                                    white-space: nowrap;
                                                    margin: 0 0 10px;
                                                }

                                                .delete-imported-demo-content {
                                                    position: absolute;
                                                    right: 0;
                                                    top: -3px;
                                                    width: 24px;
                                                    height: 24px;
                                                    &::before {
                                                        content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 22H7C5.89543 22 5 21.1046 5 20V7H3V5H7V4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V5H21V7H19V20C19 21.1046 18.1046 22 17 22ZM7 7V20H17V7H7ZM9 4V5H15V4H9ZM15 18H13V9H15V18ZM11 18H9V9H11V18Z' fill='%2381909c'/%3E%3C/svg%3E%0A");
                                                    }
                                                }

                                                p {
                                                    display: flex;
                                                    flex-direction: column;
                                                    align-items: flex-start;
                                                    line-height: 2;
                                                    padding: 0;
                                                    margin: 0;
                                                    position: relative;

                                                    a {
                                                        font-size: 13px;
                                                        font-weight: 600;
                                                        text-decoration: none;
                                                        color: $primary-color;

                                                        &:hover,
                                                        &:active {
                                                            color: $secondary-color;
                                                            outline: none;
                                                        }
                                                        &:focus {
                                                            outline: none;
                                                            box-shadow: none;
                                                        }
                                                    }
                                                }

                                                input[type="radio"] {
                                                    display: none;
                                                    position: static;
                                                }
                                            }
                                        }

                                        &.selected-template,
                                        &.preparing-view-template {
                                            .preview-thumbnail {
                                                cursor: initial;
                                                &::before {
                                                    background-color: rgba(
                                                        $primary-color,
                                                        0.8
                                                    );
                                                    opacity: 1;
                                                }

                                                .button-select-template {
                                                    color: $primary-color;
                                                    background-color: $light-color;
                                                    opacity: 1;
                                                    cursor: initial;
                                                }

                                                .#{$prefix}dot-elastic,
                                                .#{$prefix}dot-elastic::before,
                                                .#{$prefix}dot-elastic::after {
                                                    background-color: $light-color;
                                                    color: $light-color;
                                                }
                                            }
                                        }

                                        &.imported-demo-content {
                                            .preview-thumbnail {
                                                &::before {
                                                    background-color: rgba(
                                                        $dark-color,
                                                        0.5
                                                    );
                                                    opacity: 1;
                                                }

                                                .button-select-template {
                                                    color: $light-color;
                                                    background-color: $green-color;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        &.step-import-demo {
                            .#{$prefix}notice {
                                margin: 0 0 20px;

                                > ul {
                                    list-style: none;
                                    margin: 5px 0 10px;

                                    > li {
                                        padding: 0;
                                        margin-bottom: 15px;

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

                                        h3 {
                                            font-size: 14px;
                                            font-weight: 600;
                                            margin-top: 0;
                                            margin-bottom: 5px;

                                            .plugin-badge {
                                                background-color: transparent;
                                                border-color: transparent;
                                                text-transform: initial;
                                                font-size: 13px;
                                                font-weight: 400;
                                                padding-left: 0;
                                                margin-left: 15px;

                                                &::before {
                                                    display: inline-block;
                                                    vertical-align: middle;
                                                    float: none;
                                                    height: auto;
                                                    width: auto;
                                                    margin: 0;
                                                    margin-right: 5px;
                                                }
                                            }
                                        }

                                        &.plugin-level_recommended {
                                            h3 .plugin-badge {
                                                color: $bluish-grey-color;
                                
                                                &::before {
                                                    content: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.49991 3.75001C7.17633 3.75001 6.91403 4.0123 6.91403 4.33589C6.91403 4.65947 7.17633 4.92177 7.49991 4.92177L7.50021 4.92177C7.82379 4.92177 8.08594 4.65947 8.08594 4.33589C8.08594 4.0123 7.8235 3.75001 7.49991 3.75001Z' fill='%2381909C'/%3E%3Cpath d='M6.91442 6.38649L6.91442 10.6927C6.91442 11.0163 7.17672 11.2786 7.5003 11.2786C7.82389 11.2786 8.08618 11.0163 8.08618 10.6927L8.08618 6.38649C8.08618 6.0629 7.82389 5.80061 7.5003 5.80061C7.17672 5.80061 6.91442 6.0629 6.91442 6.38649Z' fill='%2381909C'/%3E%3Cpath d='M14.375 7.5C14.375 11.297 11.297 14.375 7.5 14.375C3.70304 14.375 0.625 11.297 0.625 7.5C0.625 3.70304 3.70304 0.625 7.5 0.625C11.297 0.625 14.375 3.70304 14.375 7.5Z' stroke='%2381909C' stroke-width='1.25'/%3E%3C/svg%3E%0A");
                                                }
                                            }
                                        }

                                        &.plugin-level_required {
                                            h3 .plugin-badge {
                                                color: $orange-color;
                                
                                                &::before {
                                                    content: url("data:image/svg+xml,%3Csvg width='18' height='15' viewBox='0 0 18 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.32837 11.9881C9.32837 12.3492 9.03564 12.642 8.6745 12.642C8.31336 12.642 8.02047 12.3492 8.02047 11.9881C8.02047 11.6269 8.31304 11.3342 8.67417 11.3342H8.6745C9.03564 11.3342 9.32837 11.627 9.32837 11.9881Z' fill='%23F57C00' stroke='%2381909C' stroke-width='0.0404494'/%3E%3Cpath d='M9.32795 4.67409V9.62871C9.32795 9.98984 9.03522 10.2826 8.67409 10.2826C8.31296 10.2826 8.02022 9.98984 8.02022 9.62871V4.67409C8.02022 4.31296 8.31296 4.02022 8.67409 4.02022C9.03522 4.02022 9.32795 4.31296 9.32795 4.67409Z' fill='%23F57C00' stroke='%2381909C' stroke-width='0.0404494'/%3E%3Cpath d='M10.4158 1.60686L16.3599 11.4699C17.1164 12.7251 16.199 14.375 14.5733 14.375H2.68511C1.05945 14.375 0.142021 12.7251 0.898504 11.4699L6.8426 1.60685C7.63158 0.297715 9.62685 0.297715 10.4158 1.60686Z' stroke='%23F57C00' stroke-width='1.25'/%3E%3C/svg%3E%0A");
                                                }
                                            }
                                        }
                                    }

                                    ul {
                                        > li {
                                            display: flex;
                                            align-items: center;
                                            gap: 5px;
                                            font-weight: 600;
                                            line-height: 1.5;
                                            list-style: none;
                                            padding: 0;
                                            padding-left: 10px;
                                            margin: 0;

                                            &::before {
                                                content: "\2023";
                                                font-size: 16px;
                                                color: darken(
                                                    $yellow-color,
                                                    15%
                                                );
                                            }
                                        }
                                    }
                                }

                                #wpz-onboard-skip-notice {
                                    display: inline-block;
                                }

                                .go-up-link {
                                    font-weight: 600;
                                    text-decoration: none;
                                    color: $primary-color;
                                    transition: all 0.2s ease;

                                    &:hover {
                                        color: $secondary-color;
                                    }
                                }
                            }

                            .#{$prefix}selected-template {
                                font-size: 18px;
                                padding: 0;
                                margin: 0 0 20px;
                                font-weight: 400;
                            }

                            .#{$prefix}import-button-wrap {
                                padding: 0;
                                margin: 0;

                                .#{$prefix}import-button {
                                    &.disabled {
                                        pointer-events: none;
                                    }
                                }
                            }
                        }
                    }
                }

                .#{$prefix}content-main-license {
                    .#{$prefix}content-main-license-label {
                        font-size: 14px;
                        font-weight: 600;
                        padding: 0;
                        margin: 0;

                        + .label-badge {
                            font-size: 11px;
                            font-weight: 600;
                            font-style: normal;
                            text-transform: uppercase;
                            line-height: 1;
                            color: $dark-grey-color;
                            background-color: rgba($dark-color, 0.05);
                            padding: 2px 10px;
                            border: 1px solid rgba($dark-color, 0.2);
                            border-radius: 50px;
                            margin: 0 0 0 1em;

                            &[data-license-status="valid"] {
                                color: $green-color;
                                background-color: rgba($green-color, 0.1);
                                border-color: $green-color;
                            }
                        }
                    }

                    .#{$prefix}content-main-license-key {
                        display: block;
                        width: 430px;
                        margin: 10px 0;
                    }

                    .#{$prefix}content-main-license-note {
                        display: block;
                        font-size: 14px;
                        font-weight: 400;
                        color: rgba($dark-color, 0.5);
                        padding: 0;
                        margin: 0;
                    }

                    .#{$prefix}content-main-license-submit {
                        margin: 30px 0 0;

                        &.button-secondary {
                            margin-left: 1em;
                        }
                    }
                }
            }

            .#{$prefix}content-side {
                flex-grow: 1;

                .#{$prefix}content-side-section {
                    padding: 20px 30px;
                    margin: 0 0 30px;

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

                    .#{$prefix}content-side-section-title {
                        display: flex;
                        align-items: center;
                        font-size: 20px;
                        padding: 0;
                        margin: 0 0 17px;

                        svg {
                            margin: 0 10px 0 0;
                        }
                    }

                    .#{$prefix}content-side-section-content {
                        padding: 0;
                        margin: 0 0 20px;
                    }
                }
            }
        }

        .#{$prefix}content-container {
            display: flex;
            gap: 30px;
            padding: 30px;

            > div {
                flex-grow: 1;
                width: 100%;
            }
        }

        .#{$prefix}content-overlay {
            grid-column: 1;
            grid-row: 1;

            .go-back-link {
                display: inline-flex;
                align-items: center;
                font-size: 18px;
                font-weight: 600;
                text-decoration: none;
                line-height: 1;
                color: $dark-color;
                margin: 0 0 15px;
                transition: all 0.2s ease;

                svg {
                    fill: currentColor;
                    margin: 0 5px 0 0;
                    transition: all 0.2s ease;
                }

                &:hover,
                &:active {
                    color: $primary-color;
                }
            }

            .#{$prefix}content-overlay-design-pages-title {
                font-size: 20px;
                font-weight: 600;
                padding: 0;
                margin: 0 0 20px;
            }

            .#{$prefix}content-overlay-design-pages-preview-link {
                margin: 0 0 40px;

                &::after {
                    content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.4444 12.4444H1.55556V1.55556H7V0H1.55556C0.692222 0 0 0.7 0 1.55556V12.4444C0 13.3 0.692222 14 1.55556 14H12.4444C13.3 14 14 13.3 14 12.4444V7H12.4444V12.4444ZM8.55556 0V1.55556H11.3478L3.70222 9.20111L4.79889 10.2978L12.4444 2.65222V5.44444H14V0H8.55556Z' fill='%233496ff'/%3E%3C/svg%3E%0A");
                    display: inline-block;
                    float: none;
                    height: auto;
                    width: auto;
                    margin: 0;
                    margin-left: 10px;
                    font-size: 0;
                }
            }

            .#{$prefix}content-overlay-design-pages-subhead {
                font-size: 18px;
                font-weight: 400;
                padding: 0;
                margin: 0 0 25px;
            }

            .#{$prefix}content-overlay-design-pages-thumbs {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 30px;
                padding: 0;
                margin: 0;

                li {
                    cursor: pointer;
                    background-color: rgba($dark-color, 0.05);
                    background-position: top center;
                    background-repeat: no-repeat;
                    background-size: 100%;
                    padding: 97.5% 0 0;
                    border-radius: 4px;
                    margin: 0;
                    overflow: hidden;
                    box-shadow: inset 0 0 0 2px transparent,
                        0 4px 4px rgba($dark-color, 0.15);
                    transition: all 0.2s ease;

                    &:hover {
                        box-shadow: inset 0 0 0 2px $medium-color,
                            0 4px 4px rgba($dark-color, 0.15);
                    }

                    &.selected {
                        cursor: auto;
                        box-shadow: inset 0 0 0 2px $primary-color,
                            0 4px 4px rgba($dark-color, 0.15);

                        strong {
                            background-color: $primary-color;
                        }
                    }

                    strong {
                        display: block;
                        font-size: 14px;
                        font-weight: 600;
                        color: $light-color;
                        background-color: $medium-color;
                        padding: 6px 10px;
                        transition: all 0.2s ease;
                    }
                }
            }

            .#{$prefix}content-overlay-design-pages-right-pane {
                padding: 0;
                margin: 0;

                > img {
                    background: rgba($dark-color, 0.05);
                    object-fit: contain;
                    width: 100%;
                    height: auto;
                    border-radius: 4px;
                    box-shadow: 0 4px 4px rgba($dark-color, 0.15);
                }
            }
        }
    }

    .#{$prefix}footer {
        display: flex;
        align-items: center;
        padding: 30px;
        margin: 30px 0 0;

        .#{$prefix}footer-logo {
            padding: 0;
            margin: 0 30px 0 0;

            a {
                display: block;
                text-indent: -999em;
                background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsUAAAB1CAYAAACmnpxEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3BpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGODdGMTE3NDA3MjA2ODExODIyQUJEN0ZFNTE5QkYyRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyMERERTJGNDlFNjgxMUU4ODM0NkExODhFNzlBMDMzQiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyMERERTJGMzlFNjgxMUU4ODM0NkExODhFNzlBMDMzQiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjEyMzc5NGVhLTBiZGYtNDQ3Zi05ODc1LTY1ZDk5NjhjZGVlNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGODdGMTE3NDA3MjA2ODExODIyQUJEN0ZFNTE5QkYyRSIvPiA8L3Jk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");
                background-size: contain;
                background-repeat: no-repeat;
                height: 16px;
                width: 95px;
                overflow: hidden;
            }
        }

        .#{$prefix}footer-links {
            display: flex;
            padding: 0;
            margin: 0;

            li {
                padding: 0;
                margin: 0 30px 0 0;

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

                a {
                    text-decoration: none;
                    color: $medium-color;

                    &:hover {
                        color: $dark-blue-color;
                    }
                }
            }
        }
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(359deg);
        }
    }
}

@media screen and (max-width: 782px) {
    .#{$prefix}wrapper {
        padding-right: 10px;
    }
}

@media screen and (min-width: 600px) {
    .#{$prefix}wrapper {
        .#{$prefix}content-wrapper {
            display: grid;
    
            .#{$prefix}content {
                display: flex;
                flex-wrap: wrap;
                gap: 30px;
                grid-column: 1;
                grid-row: 1;
    
                .#{$prefix}content-main,
                .#{$prefix}content-side {
                    flex-basis: 0;
                }
            }
        }
    }
}

/**
 * ==============================================
 * Dot Elastic
 * ==============================================
 */
.#{$prefix}dot-elastic {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: $primary-color;
    color: $primary-color;
    animation: dotElastic 1s infinite linear;

    &::before,
    &::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
    }
    &::before {
        left: -15px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: $primary-color;
        color: $primary-color;
        animation: dotElasticBefore 1s infinite linear;
    }
    &::after {
        left: 15px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: $primary-color;
        color: $primary-color;
        animation: dotElasticAfter 1s infinite linear;
    }
}

@keyframes dotElasticBefore {
    0% {
        transform: scale(1, 1);
    }
    25% {
        transform: scale(1, 1.5);
    }
    50% {
        transform: scale(1, 0.67);
    }
    75% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1, 1);
    }
}

@keyframes dotElastic {
    0% {
        transform: scale(1, 1);
    }
    25% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1, 1.5);
    }
    75% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1, 1);
    }
}

@keyframes dotElasticAfter {
    0% {
        transform: scale(1, 1);
    }
    25% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1, 0.67);
    }
    75% {
        transform: scale(1, 1.5);
    }
    100% {
        transform: scale(1, 1);
    }
}