@import "utilities/variables";
@import "utilities/framework";
@import "utilities/reset";
@import "utilities/grid";
@import "utilities/btns";
@import "utilities/color_schemes";

#pp-version {
    font-size: 14px;
    color: blue;
}

.pp-version-number {
    font-weight: bold;
}

.pp-wordpress-version {
    font-weight: bold;
    color: red;
    // background-color: yellow;
    padding: 5px 10px;
}

.pp-plugin-version {
    font-weight: bold;
    color: green;
}

.pp-current-year {
    font-weight: bold;
    color: black;
}

.pp-palette {
    font-weight: bold;
    color: pink;
}
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.pp-made-with-heart {
    display: inline-block;
    vertical-align: middle;
    animation: heartbeat 1s infinite;
}

.pp-heart {
    color: red;
    padding-right: 4px;
}

.pp-made-with-text {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

//=============================================
//
//=============================================

// .pp-notice {
//     background-color: #f44336;
//     color: #fff;
//     padding: 20px;
//     margin-bottom: 20px;
//     position: relative;
// }

// .pp-notice h1 {
//     font-size: 44px;
//     margin-top: 0;
//     margin-bottom: 10px;
// }

// .pp-notice p.pp-custom-message {
//     font-size: 16px;
//     margin-top: 0;
//     margin-bottom: 20px;
// }

// .pp-notice-dismiss {
//     position: absolute;
//     top: 5px;
//     right: 5px;
//     background: transparent;
//     border: none;
//     color: #fff;
//     cursor: pointer;
//     font-size: 16px;
//     border: 1px solid red;
// }

// .pp-close-button {
//     position: relative;
//     display: inline-block;
//     width: 20px;
//     height: 20px;
// }

// .pp-close-button:before,
// .pp-close-button:after {
//     position: absolute;
//     top: 50%;
//     left: 50%;
//     content: " ";
//     height: 2px;
//     width: 10px;
//     background-color: #fff;
//     transform-origin: 50% 50%;
// }

// .pp-close-button:before {
//     transform: translate(-50%, -50%) rotate(45deg);
// }

// .pp-close-button:after {
//     transform: translate(-50%, -50%) rotate(-45deg);
// }

//=============================================
//
//=============================================

#pp_dashBoard {
    .pp-input-wrapper input[type="number"] {
        border: 1px solid $white;
    }
}

//=============================================
//
//=============================================

.pp-borderradius-btn {
    // background-color: #eaeaea;
    border: 1px solid $border;
    color: #333;
    padding: 5px 10px;
    cursor: pointer;
    // margin-right: 5px;
}

.pp-borderradius-btn.active {
    background-color: #ccc;
}

.pp-btns-borderradius {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    // gap: 2px;
    align-items: center;
    padding: 10px;
    border: 1px solid $border;
    // border-right: 1px solid $border;
    // border-bottom: 1px solid $border;
}

.pp-btns-borderradius button {
    // margin-bottom: 3px;
    width: 100%;
}
//=============================================
//  Form
//=============================================
.pp-form {
    display: grid;
    grid-template-columns: 200px 700px 200px;
    gap: 0px;
    border: 1px solid $border;
    @media (max-width: 782px) {
        grid-template-columns: 1fr;
    }
}

.pp-settings {
    background-color: $pp-bg;
    border-right: 1px solid $border;
    color: $black;
    a.settings-active {
        color: $white;
    }
}

//=============================================//
//=============================================
.pp-menu-link {
    display: block;
    border-bottom: 1px solid $border;
    text-decoration: none;
    color: $black;
    position: relative;
    transition: padding-left 0.3s ease;
    padding: 10px;

    &:hover {
        color: $white;
    }

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

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

.pp-menu-link::before {
    content: "";
    font-family: "dashicons";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    border-right: 1px solid $border;
    padding: 5px 10px;
    height: auto;
}

.pp-menu-link.icon-dashboard::before {
    content: "\f111";
}

.pp-menu-link.icon-login::before {
    content: "\f307";
}
.pp-menu-link.icon-topmenu::before {
    content: "\f342";
}
.pp-menu-link.icon-leftmenu::before {
    content: "\f340";
}
.pp-menu-link.icon-btns::before {
    content: "\f11a";
}
.pp-menu-link.icon-reset::before {
    content: "\f531";
}

.pp-menu-link:hover {
    padding-left: 55px;
}

// .pp-menu-link:hover::before {
//     transform: translate(20px, -50%);
// }
.pp-menu {
    padding: 0;
    a {
        padding-left: 50px;
    }

    h2 {
        color: $white;
        padding: 16px;
        text-align: center;
        margin: 0;
        border-bottom: 1px solid $border;
    }
}
//=============================================//
//=============================================

.pp-content {
    // padding: 20px;
    background-color: $card-body;

    h1 {
        text-align: center;
        font-weight: 700;
        margin-bottom: 20px;
        color: $primary-color;
    }
}
.pp-sidebar {
    position: relative;

    background-color: $card-body;

    border-left: 1px solid $border;
    border-right: 1px solid $border;

    // padding: 1rem;
    // border: 1px solid $border;
    // position: sticky;
    // top: 50px;

    .btnsave {
        display: block;
        border: none;
        cursor: pointer;
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;

        color: #fff;
    }
}

//=============================================
//  END
//=============================================

.pp-card-content {
    display: none;
}

.pp-card-content.active {
    display: block;
}
//=============================================
//  Container
//=============================================
.pp-palettepro {
}

.pp-container {
    width: 100%;
    max-width: 1100px;
    padding: 0 0 0 1rem;
}

//=============================================
//  NOTE
//=============================================

.pp-note {
    background-color: $pp-bg;
    color: black;
    border: 1px solid $border;
    padding: 1rem 1.5rem;
    margin: 1rem 0;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    span {
        margin-right: 1rem;
    }

    .pp-note-content {
        h4 {
            margin: 0;
            font-size: 14px;
        }
        p {
            margin: 0;
            font-size: 10px;
            font-weight: 300;
        }
    }
}
//=============================================
//  HEADER
//=============================================

.pp-head {
    background-color: $pp-bg;

    padding: 15px 15px 15px 20px;

    border-bottom: 1px solid $border;

    display: flex;

    .pp-logo {
        width: 50px;
        height: 50px;
        margin-right: 1rem;
        padding-right: 1rem;

        border-right: 1px solid $border;

        img {
            width: 50px;
            height: 50px;
        }
    }
    .pp-logoname {
        position: relative;

        h1 {
            font-size: 24px;
            margin: 7px 0;

            background: linear-gradient(to bottom right, #7049ba, #e95095);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        p {
            margin: 0;
            font-size: 12px;
        }
        span {
            position: absolute;
            left: 120px;
            top: 0px;

            padding: 3px 5px;
            border: 1px solid $border;
        }
    }
}
//=============================================
//  FOOTER
//=============================================

.pp-footer {
    background-color: $pp-bg;
    position: fixed;
    bottom: 0;
    width: 100%;

    padding: 1rem;
    border-bottom: 1px solid $border;

    display: flex;
    // flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;

    .pp-footer-text {
        // text-align: center;
    }
}

//=============================================
//  SECTION
//=============================================

.pp-section {
    // margin-bottom: 2rem;
    text-align: center;
    background-color: $pp-bg;
    // border: 1px solid $border;
}

.pp-section-head {
    padding: 1rem;
    text-align: center;

    border-bottom: 1px solid $border;

    h2 {
        padding: 0;
        margin: 0;
    }
}

.pp-section-body {
    background-color: $pp-bg;
    text-align: center;
}

.pp-section-footer {
    text-align: center;
    padding: 0 10px;
    // margin-bottom: 3rem;

    border-top: 1px solid $border;

    p {
        font-size: 12px;
    }
}
//=============================================
//  CARDS
//=============================================

.pp-card {
    background-color: $pp-bg;
    margin-top: 0;
    padding: 0;
    border: 1px solid $border;
    height: auto;
}

.pp-card-head {
    padding: 1rem;
    text-align: center;

    border-bottom: 1px solid $border;
    color: black;

    label {
        margin: 0;
        font-size: 15px;
        font-weight: 500;
    }
}

.pp-card-body {
    padding: 1rem;
    margin-bottom: 0;

    h2 {
        margin: 0;
    }

    p {
        margin: 0;
        padding: 0;
    }
}
.pp-card-footer {
    border-top: 1px solid $border;
    p {
        font-size: 10px;
    }
}

.pp-card-body-login {
    .pp-color-picker-fields {
        .pp-color-picker-wrapper:first-child {
            padding: 10px;
        }
        .pp-color-picker-wrapper:last-child {
            padding: 10px;
        }
    }
}
//=============================================
//  INPUTS
//=============================================
.pp-input-wrapper input[type="text"],
.pp-input-wrapper input[type="number"] {
    width: 100%;
    padding: 5px;
    text-align: center;
    border: 1px solid $border;
}
.pp-input-wrapper input[type="text"] {
    text-align: left;
    border: 1px solid $border;
}
.pp-input-wrapper input[type="file"] {
    display: none;
}

.pp-radio-group input[type="radio"] {
    display: none;
}
.pp-radio-group input[type="radio"]:checked + label {
    color: $black;
}
//=============================================
//  COLOR PICKER
//=============================================

.pp-color-picker-fields {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}
.pp-color-picker-wrapper {
    width: 100%;

    // .sp-original-input-container {
    //     .sp-colorize-container .sp-colorize {
    //         border: 1px solid red !important;
    //         z-index: 9999999;
    //     }
    // }

    span {
        width: 100%;
    }
}
input.spectrum.with-add-on {
    padding: 5px;
    width: 100%;
    // text-align: center;
}
.sp-original-input-container .sp-add-on {
    width: 50px !important;
}
//=============================================
//  LOGIN COLOR GRADIENT
//=============================================
.pp-radio-group {
    display: flex;
    align-items: center;

    input[type="radio"] {
        margin-right: 5px;
    }
}

.pp-radio-group label {
    display: inline-block;
    width: 50%;
    padding: 10px 0;
    font-size: 12px;
    border-bottom: 1px solid $border;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    color: $black;
}

//=============================================
//  + - input number
//=============================================
.pp-input-wrapper {
    position: relative;

    button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        cursor: pointer;
        border: 1px solid transparent;
    }

    button.pp-left {
        left: 0;
        border-left: 1px solid $border;
        border-right: 1px solid $border;
        border-top: 1px solid $border;
    }

    button.pp-center {
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

    button.pp-right {
        right: 0px;
        border-left: 1px solid $border;
        border-right: 1px solid $border;
        border-top: 1px solid $border;
    }
}
//=============================================
//  LOGO
//=============================================
.pp-input-wrapper img {
    padding-top: 1rem;
}
.pp-input-upload {
    margin-top: 1rem;

    label {
        display: block;
    }
}
//=============================================
//  DISPLAY NONE
//=============================================
.pp-hidden {
    display: none;
}

//=============================================
//  RANDOM
//=============================================

#mceu_25 div.mce-toolbar-grp > div {
    padding: 10px !important;
}
#wpcontent,
#wpfooter {
    margin-left: 140px !important;
    @media (max-width: 960px) {
        margin-left: 0 !important;
    }
}
.folded #wpcontent,
.folded #wpfooter {
    margin-left: 16px !important;
}
.wp-picker-container .wp-color-result.button {
    min-height: 30px;
    // margin: 0 6px 6px 0;
    // padding: 0 0 0 30px;
    // font-size: 11px;
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head,
#adminmenu .wp-menu-arrow,
#adminmenu .wp-menu-arrow div,
#adminmenu li.current a.menu-top,
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu {
    background: linear-gradient(to right, #7049ba, #e95095) !important;
    color: #fff;
}

#wpbody-content {
    padding-bottom: 0px;
}

#login {
    width: 378px !important;
    padding: 20% 0 0 !important;
    margin: auto;
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// .pp-left-user {
//     a {
//         height: 100px;

//         .pp-user-avatar {
//             margin-top: -4rem;
//         }
//     }

//     .pp-user-avatar img {
//         border-radius: 50%;
//         width: 60px;
//         height: 60px;
//     }

//     .pp-user-name {
//         // display: block;
//         // font-size: 1rem;
//     }
// }

// #adminmenu .pp-left-user .wp-menu-name {
//     display: flex;
//     flex-direction: column;
//     justify-content: center;
//     align-items: center;
//     width: 100%;
//     height: 75px;
//     // background-color: green;

//     padding: 0px !important;
//     height: 100px;
// }