/*
    NOTA: lo stile viene rivisto su le varie risoluzioni in base ai breakpoint di bootstrap
    tenendo conto del fatto che Umbraco dopo 1100 px aggiunge una sidebar per la navigazione.
    Di conseguenza la dimensione disponibile per le guide è:

    content-area-width = vw - sidebar-width;


    sidebar-width = 360px (compresa la scroll bar)
    scrollbar-width = ~18px
*/

/*animation code pens*/
/*
https://codepen.io/EricSimons/pen/VYGQwX
https://embed.plnkr.co/plunk/cBiNMQ
*/


:root {
    --guide-type-default-color: #434343;
    --guide-type-tutorial-color: #ffba3a;
    --guide-type-suggestion-color: #005366;
    --guide-type-feature-color: #838383;
    --guide-type-tutorial-color-darken: #001424;
    --guide-type-suggestion-color-darken: #008f83;
    --guide-type-feature-color-darken: #696969;
    --guide-btn-input: 2.125rem;
    --guide-btn-border: 2px;
    --guide-btn-default-color: #434343;
    --guide-info-alert: #88e3dc;
    --guide-info-alert-darken: #00c4b3;
    /* computation of guide container width*/
    --umbraco-sidebar-width: 360px;
    --scrollbar-width: 18px;
    --container-padding: 20px;
    --guide-columns-total-gap: calc(2 * var(--container-padding));
    --default-dashboard-container-width-when-sidebar: calc(100vw - (2 * var(--container-padding)) - var(--guide-columns-total-gap) - var(--scrollbar-width));
    --dashboard-container-width-when-sidebar: var(--default-dashboard-container-width-when-sidebar);
    --dashboard-container-width-unit: calc(var(--dashboard-container-width-when-sidebar) / 100);
    --guide-column-width: calc(33.33 * var(--dashboard-container-width-unit));
}

.guides-dashboard button {
    border-radius: 50px;
}

.guides-dashboard .btn {
    height: var(--guide-btn-input);
    padding: 0 1rem;
    display: block;
    letter-spacing: 1pt;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700 !important;
    border-radius: 50px;
    overflow: hidden;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    -webkit-transition-timing-function: cubic-bezier(.2,1,.3,1);
    transition-timing-function: cubic-bezier(.2,1,.3,1);
    -webkit-transition: background-color .3s,border-color .5s,color .5s;
    transition: background-color .3s,border-color .5s,color .5s;
}


.guide-type-details {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
}

.guide-type-details__icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
}

    .guide-type-details__icon svg {
        width: 100%;
        height: 100%;
    }

        .guide-type-details__icon svg path,
        .guide-type-details__icon svg g {
            fill: var(--guide-type-default-color);
        }

.guide-type-details__label {
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: bold;
    text-transform: uppercase;
}

.guide-preview {
    line-height: 1.1;
    background-color: #fff;
    margin-bottom: 1.5rem;
    position: relative;
    min-height: 125px;
    height: 190px;
    border-radius: 5px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: all 0.3s ease-out;
    overflow: hidden;
}

    .guide-preview:hover {
        cursor: pointer;
        background-color: #f9f9fa;
    }

    .guide-preview.readed {
        background-color: #bfbfbb;
    }

    .guide-preview .picture {
        border-radius: 5px;
        position: relative;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        height: 0;
    }

    .guide-preview.ng-move,
    .guide-preview.ng-enter,
    .guide-preview.ng-leave {
        -webkit-transition: all linear 0.5s;
        transition: all linear 0.5s;
    }

        .guide-preview.ng-leave.ng-leave-active,
        .guide-preview.ng-move,
        .guide-preview.ng-enter {
            opacity: 0;
        }

            .guide-preview.ng-leave,
            .guide-preview.ng-move.ng-move-active,
            .guide-preview.ng-enter.ng-enter-active {
                opacity: 1;
            }

    .guide-preview .picture img {
        transition: all 0.3s ease-out;
        opacity: 0;
    }

    .guide-preview.active {
        color: #fff;
        height: 475px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

        .guide-preview.active .picture {
            visibility: visible;
            opacity: 1;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: 1;
        }

            .guide-preview.active .picture img {
                opacity: 1;
                transition-delay: 0.5s;
            }

            .guide-preview.active .picture::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                height: 50%;
                width: 100%;
                z-index: 2;
                background: rgba(10, 10, 10, 0.35);
                background: linear-gradient( 180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 1) 100% );
            }

.guide-preview__details {
    position: relative;
    padding: 2rem;
    width: 75%;
}

.guide-preview.active .guide-preview__details {
    position: relative;
    z-index: 3;
}

.guide-preview__marker {
    height: 5px;
    width: 55px;
    border-radius: 5px;
    background-color: var(--guide-type-default-color);
}

.guide-preview__title {
    font-size: 1.75rem; /*26px*/
    font-weight: bold;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.guide-preview__tag {
    display: flex;
    align-items: center;
}

.guide-preview__tag-icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
}

    .guide-preview__tag-icon svg {
        width: 100%;
        height: 100%;
    }

        .guide-preview__tag-icon svg path,
        .guide-preview__tag-icon svg g {
            fill: var(--guide-type-default-color);
        }

.guide-preview.active .guide-preview__tag-icon svg g,
.guide-preview.active .guide-preview__tag-icon svg path{
    fill: #fff;
    opacity: 1;
}

.guide-preview__tag-label {
    text-transform: uppercase;
}

.guide-preview__unreaded-marker {
    position: absolute;
    top: 1.25rem;
    right: 0;
    z-index: 2;
}

.zoom-in-wrapper {
    position: relative;
    overflow: hidden;
}

.zoom-in {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .zoom-in:hover {
        transform: scale(1.1);
    }

.guide-preview:hover .zoom-in {
    transform: scale(1.1);
}

.guides-previews-group {
    font-family: "Lato";
}

.guides-previews-group--tutorial .guide-preview__marker {
    background-color: var(--guide-type-tutorial-color);
}

.guides-previews-group--suggestion .guide-preview__marker {
    background-color: var(--guide-type-suggestion-color);
}

.guides-previews-group--feature .guide-preview__marker {
    background-color: var(--guide-type-feature-color);
}

.guides-previews-group--tutorial .guide-type-details__label {
    color: var(--guide-type-tutorial-color);
}

.guides-previews-group--suggestion .guide-type-details__label {
    color: var(--guide-type-suggestion-color);
}

.guides-previews-group--feature .guide-type-details__label {
    color: var(--guide-type-feature-color);
}

.guides-previews-group--tutorial .guide-type-details__icon svg path,
.guides-previews-group--tutorial .guide-type-details__icon svg g{
    fill: var(--guide-type-tutorial-color);
}

.guides-previews-group--suggestion .guide-type-details__icon svg path,
.guides-previews-group--suggestion .guide-type-details__icon svg g{
    fill: var(--guide-type-suggestion-color);
}

.guides-previews-group--feature .guide-type-details__icon svg path,
.guides-previews-group--feature .guide-type-details__icon svg g {
    fill: var(--guide-type-feature-color);
}


.guide-preview--readed .guide-preview__marker {
    background-color: var(--guide-type-default-color);
}

.guide-preview--readed::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 3;
    background-color: #dbdbdb;
    border-radius: 5px;
    opacity: 0.5;
}

.guide-preview.active.guide-preview--readed .guide-preview__marker {
    background-color: #fff;
}


.guides-previews-group--tutorial .guide-preview__unreaded-marker #Rectangle {
    fill: var(--guide-type-tutorial-color);
}

.guides-previews-group--suggestion .guide-preview__unreaded-marker #Rectangle {
    fill: var(--guide-type-suggestion-color);
}

.guides-previews-group--feature .guide-preview__unreaded-marker #Rectangle {
    fill: var(--guide-type-feature-color);
}

/* shared elements*/
.guides-dashboard .guide-btn-outline-dark {
    border: var(--guide-btn-border) solid var(--guide-btn-default-color);
    background-color: transparent;
    color: var(--guide-btn-default-color);
}

    .guides-dashboard .guide-btn-outline-dark:hover {
        background-color: var(--guide-btn-default-color);
        color: #fff;
    }

/* Guide details */
.guide-detail {
    font-family: "Lato";
}

.guide-detail__marker {
    height: 5px;
    width: 55px;
    border-radius: 5px;
    background-color: var(--guide-type-default-color);
}

.guide-detail__title {
    font-size: 1.75rem; /*26px*/
    line-height: 1.1;
    font-weight: bold;
}

.guide-detail__tag {
    display: flex;
    align-items: center;
}

.guide-detail__tag-icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
}

    .guide-detail__tag-icon svg {
        width: 100%;
        height: 100%;
    }

        .guide-detail__tag-icon svg path,
        .guide-detail__tag-icon svg g{
            fill: var(--guide-type-default-color);
        }

.guide-detail__tag-label {
    text-transform: uppercase;
}


.guide-detail--tutorial .guide-detail_marker {
    background-color: var(--guide-type-tutorial-color);
}

.guide-detail--suggestion .guide-detail__marker {
    background-color: var(--guide-type-suggestion-color);
}

.guide-detail--feature .guide-detail__marker {
    background-color: var(--guide-type-feature-color);
}

.guide-detail--tutorial .guide-type-details__label {
    color: var(--guide-type-tutorial-color);
}

.guide-detail--suggestion .guide-type-details__label {
    color: var(--guide-type-suggestion-color);
}

.guide-detail--feature .guide-type-details__label {
    color: var(--guide-type-feature-color);
}

.guide-detail--tutorial .guide-type-details__icon svg path,
.guide-detail--tutorial .guide-type-details__icon svg g {
    fill: var(--guide-type-tutorial-color);
}

.guide-detail--suggestion .guide-type-details__icon svg path,
.guide-detail--suggestion .guide-type-details__icon svg g{
    fill: var(--guide-type-suggestion-color);
}

.guide-detail--feature .guide-type-details__icon svg path,
.guide-detail--feature .guide-type-details__icon svg g{
    fill: var(--guide-type-feature-color);
}

.guide-detail--tutorial .btn-primary {
    background-color: var(--guide-type-tutorial-color);
    border-color: var(--guide-type-tutorial-color);
}

.guide-detail--suggestion .btn-primary {
    background-color: var(--guide-type-suggestion-color);
    border-color: var(--guide-type-suggestion-color);
}

.guide-detail--feature .btn-primary {
    background-color: var(--guide-type-feature-color);
    border-color: var(--guide-type-feature-color);
}

.guide-detail--tutorial .btn-primary:hover {
    background-color: var(--guide-type-tutorial-color-darken);
    border-color: var(--guide-type-tutorial-color-darken);
}

.guide-detail--suggestion .btn-primary:hover {
    background-color: var(--guide-type-suggestion-color-darken);
    border-color: var(--guide-type-suggestion-color-darken);
}

.guide-detail--feature .btn-primary:hover {
    background-color: var(--guide-type-feature-color-darken);
    border-color: var(--guide-type-feature-color-darken);
}

.guide-detail--tutorial .btn-primary:disabled {
    background-color: var(--guide-type-default-color);
    border-color: var(--guide-type-default-color);
}

.guide-detail--suggestion .btn-primary:disabled {
    background-color: var(--guide-type-default-color);
    border-color: var(--guide-type-default-color);
}

.guide-detail--feature .btn-primary:disabled {
    background-color: var(--guide-type-default-color);
    border-color: var(--guide-type-default-color);
}

/* Blocks styles */

/* CMS Alter block*/
.cms-alert-block {
    font-family: "Lato";
    display: flex;
    align-items: center;
    font-size: 1rem;
    border-radius: 5px;
}

    .cms-alert-block .alert__icon {
        width: 32px;
        height: 32px;
        margin-right: 1rem;
        flex-shrink: 0;
    }

        .cms-alert-block .alert__icon svg {
            width: 100%;
            height: 100%;
            fill: #fff;
            color: #fff;
        }

    .cms-alert-block p {
        margin: 0;
    }

/* request success aka thank you for submission */
.request-success__icon {
    height: 32px;
    width: 32px;
}

    .request-success__icon svg {
        height: 100%;
        width: 100%;
        fill: #2bc37c;
    }

.guides-dashboard .alert-info {
    background-color: var(--guide-info-alert);
    border-color: var(--guide-info-alert-darken);
}


.guides-previews {
    display: flex;
}

    .guides-previews .guides-previews-group {
        width: 100%;
    }