@import "partials/help";

body[class*='_es_dashboard'] {
    background: #fff;

    h3 {
        font-weight: 500;
        font-size: 20px;
        line-height: 32px;
    }

    .es-dashboard {
        font-family: 'Roboto', sans-serif;
    }

    .update-nag {
        display: none;
    }

    #wpcontent {
        padding-left: 0;
    }

    .wrap {
        margin: 0;
        padding: 35px 50px;
    }

    .es-products-container, .es-upgrade-container {
        h2 {
            text-align: center;
            width: 90%;
            margin: 0 auto;
            //max-width: 400px;
            font-weight: bold;
            font-size: 24px;
            line-height: 34px;
        }
    }

    .es-upgrade-container {
        background: #E1F5FE;

        .wrap {
            padding: 50px;
        }

        .es-upgrade-item {
            min-width: 180px;
        }
    }
}

.es-dashboard-nav {
    margin-top: 20px;
}

.es-upgrade-item {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;

    h4 {
        font-weight: 500;
        font-size: 20px;
        line-height: 32px;
        color: #263238;
    }

    .es-icon {
        background: #fff;
        color: #4FC3F7;
        font-size: 20px;
    }

    p {
        font-size: 14px;
        line-height: 24px;
        color: #263238;
    }
}

.es-product-slick-themes {
    margin-top: 32px;
    display: flex;
    align-items: center;
    width: calc(100% + 8px);
    padding: 0 4px; //space for the shadows
    margin-left: -4px; //put the div in its original position

    .slick-list {
        margin: 0 -15px;
    }

    .slick-list>.slick-track>.slick-slide {
        margin: 0 15px;
    }

    .slick-dots {
        display: block;
        position: absolute;
        flex: 1 0 100%;
    }

    .slick-slide {
        img {
            width: 100%;
            height: auto;
        }
    }

    .slick-arrow {
        box-sizing: border-box;
        color: #37474F;
        font-size: 18px;

        &.slick-prev {
            padding-right: 20px;
        }

        &.slick-next {
            position: relative;
            padding-left: 20px;
            right: -7px;
        }

        &:hover {
            background: transparent;
            color:#4FC3F7;
        }

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

    .es-product {
        text-align: center;
        position: relative;

        .es-label {
            position: absolute;
            top: 8px;
            left: 8px;
            z-index: 2;

            &.es-label--green {
                background: #388E3C;
            }
        }

        a.es-link {
            font-size: 12px;
            line-height: 18px;
            color: #B0BEC5;
            font-weight: bold;
            text-decoration: none;
        }

        .es-control {
            position: absolute;
            z-index: 2;
            transform: translateX(-50%) translateY(-50%);
            top: 50%;
            left: 50%;
            display: none;
            width: 100%;

            a {
                display: inline-block;
                margin: 5px 15px;
            }
        }

        .es-product__image {
            position: relative;
            margin-bottom: 15px;
            box-shadow: 0px 1px 4px rgba(38, 50, 56, 0.3);

            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(255,255,255,0.7);
                z-index: 1;
                display: none;
            }
        }

        &:hover {
            color: #37474F;

            .es-control {
                display: block;
            }

            a.es-link {
                color: #37474F;
            }

            .es-product__image:before {
                display: block;
                box-shadow: 0px 2px 6px rgba(38, 50, 56, 0.15);
            }
        }

        .es-preview {
            font-size: 14px;
            color: #263238;
            line-height: 24px;
            font-weight: 500;
        }
    }
}

.es-products-container {
    padding: 50px 0;
    font-family: 'Roboto', sans-serif;
}

.es-info-container {
    font-family: 'Roboto', sans-serif;

    .es-articles, .es-services, .es-changelog-container {
        max-height: 400px;
        overflow-y: scroll;
        min-width: 220px;
        display: flex;
        flex-direction: column;
    }


    .es-article {
        margin-bottom: 1em;

        .es-article__title {
            font-weight: 500;
            font-size: 14px;
            line-height: 24px;
            //text-decoration-line: underline;
            color: #263238;
            display: block;
        }

        .es-article__date {
            font-weight: normal;
            font-size: 12px;
            line-height: 18px;
            color: #B0BEC5;
            display: block;
        }
    }

    .es-service {
        a {
            font-weight: 500;
            font-size: 14px;
            line-height: 24px;
            text-decoration-line: underline;
            color: #263238;
        }

        p {
            font-weight: normal;
            font-size: 12px;
            line-height: 18px;
            color: #B0BEC5;
        }
    }

    .es-release {
        margin-bottom: 25px;
        display: inline-block;

        .es-release__version {
            font-weight: bold;
        }

        .es-release__header {
            display: flex;
            justify-content: space-between;

            span {
                font-size: 12px;
                line-height: 18px;
                color: #B0BEC5;
            }
        }
    }

    .es-changelog {
        margin-bottom: 1em;

        .es-label__wrap {
            float: left;
            width: 60px;
            position: relative;
            top: 2px;

            &:after {
                content: '•';
                color: #37474F;
                position: absolute;
                right: 4px;
                top: 2px;
            }
        }

        .es-changelog__text {
            font-size: 14px;
            line-height: 24px;
            color: #37474F;
        }
    }
}