@import "../node_modules/normalize-scss/sass/normalize/import-now";
@import "colors-and-vars";

$fa-font-path: "../fonts" !default;

@import "font-awesome/fontawesome";
@import "font-awesome/solid";

.#{$fa-css-prefix}-large {
    @extend .#{$fa-css-prefix}-lg;
}

$fa-css-prefix: icon;
@import "font-awesome/fontawesome";
@import "font-awesome/solid";

.#{$fa-css-prefix}-large {
    @extend .#{$fa-css-prefix}-lg;
}

$fa-css-prefix: fa;

@mixin awesome-font() {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;

    font-family: 'Font Awesome 5 Free', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-weight: 900;
}

%pseudo-font {
    @include awesome-font;
}

*,
::after,
::before {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    color: $mineShaft;
    font: $baseText;
    -webkit-font-smoothing: antialiased;
    background: $wildSand;
    display: flex;
    flex-direction: column;

    a {
        color: $blue;
        text-decoration: none;
        transition: all .2s ease-in;

        &:hover {
            color: darken($blue, 10%);
        }
    }
}

.button {
    display: inline-block;
    flex: 0 0 auto;
    margin-right: 0;
    margin-left: 0;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    line-height: 1;
    font-size: 18px;
    padding: 15px 30px;
    width: 170px;
    transition: background-color .2s ease-out;
    background: $green;
    box-shadow: $shadowBorder;
}

.custom-select {
    font-size: 16px;
    width: 50%;
    padding: 9px 0 9px 20px;
    border: 1px solid $lightGray !important;
    border-radius: 3px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
    background-size: 12px;
    background-position: calc(100% - 20px) 60%;
    background-repeat: no-repeat;
    background-color: $lightestGray;
    font-family: $codefonts;
}

.languages {
    &-wrapper {
      display: flex;
      flex-flow: wrap;
    }

    &-item {
        cursor: pointer;
        flex-basis: 25%;
        font-family: $bodyfonts;
        max-width: 25%;
        padding: 5px;
        position: relative;

        &:focus-within,
        &--active {
            .languages-item__inner {
                border-color: $blue;
                background-color: lighten($blue, 38%);
                outline: 1px solid $blue;
            }
        }

        &--popular {
            display: block;
        }

        &--other {
            display: none;
        }

        &__radio {
            position: absolute;
            z-index: -1;
        }

        &__inner {
            background-color: $lightestGray;
            border-radius: 3px;
            border: 1px solid $softGray;
            color: $darkGray;
            cursor: pointer;
            display: block;
            font-family: $bodyfonts;
            padding: .6rem .7rem;
            text-align: left;
            width: 100%;

            &__native {
                display: block;
                font-weight: bold;
                font-size: 1rem;
                margin: 0 0 0.2rem;
            }

            &__name {
                display: block;
            }

            &__code {
                display: inline-block;
                font-weight: bold;
                text-transform: uppercase;
            }
        }
    }

    &__toggler {
      background-color: transparent;
      border: 0;
      color: $darkGray;
      font-family: $bodyfonts;
      font-size: 18px;
      padding: 5px;
      text-align: center;
      width: 100%;

      & > span {
          cursor: pointer;
          border-bottom: 1px dashed;
      }

      &-wrapper {
          align-items: stretch;
          display: flex;
          justify-content: center;
      }
  }
}

[type="checkbox"] {
    &:not(:checked),
    &:checked {
        position: absolute;
        left: -9999px;
    }

    &:not(:checked)+label,
    &:checked+label {
        position: relative;
        padding-left: 1.95em;
        cursor: pointer;
        margin: 0 auto;
    }

    &:disabled+label:before {
        opacity: .5;
    }

    .cleanup &:not(:checked)+label,
    .cleanup &:checked+label {
        padding-left: 0;
    }

    &:not(:checked)+label:before, &:checked+label:before {
        @extend %pseudo-font;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 30px;
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

    &:not(:checked)+label:before {
        content: fa-content($fa-var-square);
        color: $softGray;
    }

    &:checked+label:before {
        content: fa-content($fa-var-check-square);
        color: $blue;
    }
}

/* hover style just for information */
#modx-next {
    background-color: $green;
    color: $white;

    &:hover {
        background: darken($green, 5%);
    }
}

#modx-back {
    background: $white;
    color: $darkGray;
    background-repeat: no-repeat;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    display: inline-block;
    *display: inline;
    position: relative;
    text-decoration: none;
    transition: background-color .2s ease-out;
    zoom: 1;

    &:hover {
        background-color: $lightGray;
        box-shadow: $softGray;
        color: $darkGray;
    }
}

.steps-outer {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}

.modx-installer-steps {
    list-style: none;
    text-align: center;
    display: flex;
    justify-content: space-between;
    padding: 0;

    li {
        display: inline-block;
        width: calc(100% / 7);
        position: relative;
        z-index: 2;

        &:first-child::before,
        &:last-child::after {
            display: none;
        }

        &::after,
        &::before {
            content: "";
            height: 2px;
            background-color: $softGray;
            position: absolute;
            top: 13px;
            z-index: -1;
            transition: all .3s;
        }

        &::after {
            left: 50%;
            right: 0;
        }

        &::before {
            right: 50%;
            left: 0;
        }

        span.icon {
            display: block;
            position: relative;
            width: 25px;
            height: 25px;
            background: $lightGray;
            border-radius: 50%;
            border: 2px solid $softGray;
            margin: 1px auto 10px;
            z-index: 4;
            box-sizing: border-box;
            font-size: 15px;
            line-height: 21px;
            transition: all .3s;
        }

        &.active {

            &::before,
            &::after {
                background-color: $green;
            }

            span.icon {
                background-color: $green;
                border-color: $green;

                &::after {
                    @extend %pseudo-font;
                    content: fa-content($fa-var-check);
                    color: $white;
                    position: relative;
                    line-height: 1;
                }
            }
        }

        &.current {
            &::before {
                background-color: $green;
            }

            span.icon {
                background-color: $green;
                border-color: $white;
                border-width: 7px;
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            }
        }
    }
}

input[type="text"],
input[type="email"],
input[type="password"] {
    background-color: $lightestGray;
    border: 1px solid $lightGray;
    border-radius: 3px;
    font-family: $codefonts;
    padding: 10px 20px;
}

input[type="submit"],
input[type="button"] {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-family: 'Font Awesome 5 Free', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.wrapper {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1140px;
}

header {
    margin-top: 10px;

    .wrapper {
        &_logo {
            .logo {
                background: url('../images/modx-logo-color.svg') no-repeat center transparent;
                width: 220px;
                height: 85px;
                background-size: contain;
                display: block;
                position: relative;
                text-indent: -9999px;
                margin: 0 auto;
            }
        }

        &_version {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            padding: 5px 0;
        }
    }
}

#content {
    flex-grow: 1;

    .content-inside {
        padding: 20px;

        .wrapper {
            background: $white;
            padding: 30px;
            border-radius: 5px;
            max-width: 890px;
            height: auto;
            min-height: 400px;

            .content_header {
                display: flex;
                flex-wrap: wrap;

                &_title {
                    width: 100%;
                    font: 600 30px $headfonts;
                    color: $mineShaft;
                    padding-bottom: 15px;
                    border-bottom: 1px solid $softGray;
                }
            }

            form {
                margin-top: 25px;
                display: block;

                .content-wrap {
                    min-height: calc(430px - 80px);

                    h2 {
                        font-weight: 500;
                        font-size: 22px;
                    }

                    p {
                        font-size: 16px;
                    }

                    .title {
                        font-weight: 500;
                    }
                }
            }

            .setup_navbar {
                width: 100%;
                display: inline-block;
                padding-top: 25px;

                #modx-back {
                    float: left;
                }

                #modx-next {
                    float: right;
                }
            }

            .content_footer {
                padding-top: 25px;
                padding-bottom: 30px;
            }
        }
    }
}

.options {
    &-wrap {
        margin: 0;

        .option-item {
            display: flex;
            align-items: center;
            padding: 25px 40px 25px 0;
            cursor: pointer;
            min-height: 120px;
            margin-bottom: 10px;
            position: relative;

            &-note {
                display: flex;
                align-items: center;
                padding: 25px 40px;
                min-height: 140px;
                margin-bottom: 10px;
                border-left: 0.2rem solid $blue;
                background-color: rgba($blue, 0.3);
                border-color: $blue;
                color: darken($blue, 50%);
            }

            &-input {
                flex-basis: 130px;
                display: flex;
                flex-shrink: 0;

                input {
                    margin: 0 auto;
                    display: block;
                }

                input[type="text"] {
                    font-size: 14px;
                    padding: 8px 15px;
                    text-align: center;
                }
            }

            &-desc {
                flex: 1 1 0;
                letter-spacing: 0;

                .label {
                    font-size: 20px;
                    color: $mineShaft;
                    font-weight: 500;
                }

                .desc {
                    font-size: 16px;
                    line-height: 25px;
                    color: $scorpion;
                }
            }

            & .fa {
                color: $alto;
            }

            & input:checked~.fa {
                color: $blue;
            }

            span {
                display: block;
                border: 1px solid $alto;
                padding: 20px;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }

            & input:checked~span {
                border-color: $blue;
            }
        }
    }
}

.advanced_options {
    .option-item {
        padding: 10px 40px 10px 0;
        border: 1px solid $alto;
        min-height: 70px;

        &-input {
            flex-basis: 130px;
            display: flex;
            flex-shrink: 0;
        }

        &-desc {
            flex: 1 1 0;
            letter-spacing: 0;

            .label {
                font-size: 16px;
                color: $mineShaft;
                font-weight: 500;
            }

            .desc {
                font-size: 14px;
                line-height: 1.6;
                color: $scorpion;
            }
        }
    }
}

.hide {
    display: none !important;
}

.fa {
    color: $blue;
    font-size: 3em;
    margin: 0 auto;
}

#welcome {
    input#config_key {
        font-size: 16px;
        padding: 10px 20px;
        margin-left: 10px;
    }
}

#cck-div {
    font-size: 16px;

    p {
        margin-bottom: 0;
    }

    pre {
        display: inline-block;
        font-size: 16px;
        margin: 0;
    }
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;

    #modx-testcoll,
    #modx-testconn {
        background: $white;
        border: 1px solid $darkGray;
        color: $darkGray;
        margin-top: 10px;
        text-align: center;
        width: auto;

        &:hover {
            box-shadow: 0 0 15px 5px rgba(154, 158, 156, .2);
            transition: all .4s cubic-bezier(.23, 1, .135, 2.284);
        }
    }
}

#install {
    h2.title {
        font-size: 20px;
        color: $mineShaft;
        letter-spacing: 0;
    }

    p {
        font-size: 16px;
        color: $scorpion;
        letter-spacing: 0;
        line-height: 22px;
    }

    ul.checklist {
        list-style: none;
        margin: 15px 0;
        padding: 0;

        li {
            border-left: 0.2rem solid;
            background-color: rgba($blue, 0.2);
            border-color: $blue;
            font-family: $codefonts;
            padding: 15px 10px;

            p {
                color: #333333;
                font-size: 14px;
                line-height: 14px;
                margin: 0;
            }

            .ok, .notok {
                font-weight: 700;
            }

            .ok {
                color: darken($green, 25%);
            }

            .notok {
                color: darken($red, 25%);
            }
        }

        & .warning, & .testWarn {
            background-color: rgba($orange, 0.2);
            border-color: $orange;
        }

        & .success, & .testPassed {
            background-color: rgba($green, 0.2);
            border-color: $green;
        }

        & .failed, & .testFailed {
            background-color: rgba($red, 0.2);
            border-color: $red;
        }
    }

    .labelHolder {
        margin-bottom: 10px;
        display: flex;
        align-items: center;

        .col {
            line-height: 30px;
            display: flex;
            flex-direction: column;

            &:first-child {
                flex-basis: 40%
            }

            &:last-child {
                flex-basis: 60%;
            }

            label {
                color: $scorpion;
                font-size: 16px;
                letter-spacing: 0;
            }

            input[type="text"],
            input[type="email"],
            input[type="password"] {
                font-size: 16px;
                padding: 10px 20px;
                width: 260px;
            }

            select {
                width: 260px;
            }

            .field_error {
                color: $red !important;
                font-size: 14px;
                margin-left: 10px;
            }
        }
    }

    .context-property {
        display: flex;
        line-height: 30px;
        width: 100%;

        @media (max-width: 575.98px) {
            flex-direction: column;
        }

        &_label {
            flex-basis: 40%;

            @media (max-width: 575.98px) {
                flex-basis: 100%;
                width: 100%;
            }

            label {
                color: $scorpion;
                font-size: 16px;
                letter-spacing: 0;
            }
        }

        &_value {
            align-items: center;
            display: flex;
            flex-basis: 60%;

            @media (max-width: 575.98px) {
                flex-basis: 100%;
                width: 100%;
            }

            input[type="text"] {
                font-size: 16px;
                padding: 10px 20px;
                width: 100%;

                @media (max-width: 575.98px) {
                    font-size: 14px;
                }
            }

            &_checkbox-wrapper {
                margin: 0 0 0 4px;
                text-align: center;
            }
        }
    }

    #modx-db-step1-msg,
    #modx-db-step2-msg {
        margin-bottom: 10px;
        border-bottom: 2px solid $alto;
        padding-bottom: 22px;

        .title {
            color: $mineShaft;
            font-size: 16px;
            font-weight: 500;
            display: block;
            margin-bottom: 10px;
        }

        span.connect-msg,
        span.result {
            background-color: $lighterGreen;
            border-left: 0.2rem solid;
            border-color: $green;
            color: darken($green, 25%);
            display: block;
            font-size: 16px;
            font-family: $codefonts;
            padding: 10px;

            p {
                font-size: 14px;

                &:first-child {
                    margin-block-start: 0;
                }

                &:last-child {
                    margin-block-end: 0;
                }
            }
        }

        &.error span.connect-msg,
        &.error span.result {
            background-color: rgba($red, 0.2);
            border-color: $red;

            p {
                color: darken($red, 25%);
            }
        }
    }

    #modx-db-info {
        span {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }

        #modx-db-server-version,
        #modx-db-client-version {
            color: $scorpion;
            font-weight: normal;

            &.success {
                color: $green;
            }

            &.warning {
                color: $red;
            }
        }
    }

    #modx-db-step2 {
        .result {
            font-weight: 500;
        }
    }

    #modx-db-step2.success span.result {
        color: $green;
    }
}

.setup_body {
    box-sizing: border-box;
    min-height: calc(430px - 80px);
    padding-bottom: 90px;
}

.cleanup {
    [type="checkbox"]:not(:checked)+label:before,
    [type="checkbox"]:checked+label:before {
        position: relative;
        margin: 10px 10px 0 0;
        float: left;
    }
}

footer {
    background: $white;
    padding: 15px 0;
}


// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
    .modx-installer-steps li span.title {
        display: none;
    }

    .button {
        font-size: 14px;
        padding: 15px 10px;
        width: 140px;
    }

    #content .content-inside .wrapper {
        padding: 20px;

        form .content-wrap {
            h2 {
                font-size: 20px;
            }

            p {
                font-size: 14px;
            }
        }

        .content_header_title {
            font-size: 24px;
        }
    }

    #cck-div,
    pre,
    .custom-select,
    #install p {
        font-size: 14px;
    }

    #welcome input#config_key {
        font-size: 14px;
        margin-left: 0;
        margin-top: 5px;
    }

    #install {
        .labelHolder {
            flex-direction: column;
        }

        #modx-db-step1-msg .title {
            margin-top: 10px;
        }

        #modx-db-step1-msg.error span.connect-msg p {
            font-size: 13px;
            word-break: break-all;
        }

        #modx-db-info #modx-db-client-version.success {
            word-break: break-all;
        }

        h2.title {
            font-size: 20px;
        }

        h3 {
            text-align: center;
        }
    }

    small {
        font-size: 100%;
    }

    #install ul.checklist {
        word-break: break-all;
    }

    .setup_navbar.complete {
        display: flex !important;
        flex-direction: column;

        span.cleanup {
            display: flex;
        }
    }

    .cleanup {
        [type="checkbox"]:not(:checked)+label:before,
        [type="checkbox"]:checked+label:before {
            top: 5px !important;
        }

        [type="checkbox"]:not(:checked)+label:after,
        [type="checkbox"]:checked+label:after {
            top: 8px !important;
        }
    }

    footer {
        font-size: 12px;
        padding: 0;
    }
}

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) {
  .languages-item {
    flex-basis: 100%;
    max-width: 100%;
  }
}

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) {}

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) {}
