.application {
    &__title {
        font-family: "KGJune";
        color: $accent;
        text-transform: uppercase;
        font-size: 2.8rem;
    }
    &__item {
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        text-decoration: none;
        position: relative;
        width: $application-width;
        height: $application-height;
        margin: 5px;
        padding: 5px;
        background-color: transparent;
        color: $text-color;
        text-align: center;
        border: 1px dashed transparent;
        border-radius: $border-radius;
        transition: color 0.4s ease-in-out;
        cursor: pointer;
        font-size: 1.6rem;
        
        i {
            display: flex;
            justify-content: center;
            align-items: center;
            width: $application-icon-size;
            height: $application-icon-size;
            font-size: 6.4rem;
            color: $white;
            transition: box-shadow 0.4s ease-in-out, opacity 0.25s ease-in-out;
            &::before {
                text-shadow: 3px 3px 0 rgba($black, 0.1);
            }
        }
        span {
            padding-top: 7px;
            line-height: 1.3;
            display: flex;
            flex: 1;
            align-items: center;
        }
        &:hover {
            transition: color 0.4s ease-in-out;
            color: $primary;
            text-decoration: none;
            i {
                transition: box-shadow 0.4s ease-in-out, opacity 0.25s ease-in-out;
                box-shadow: 3px 3px 5px rgba($black, 0.1);
                opacity: 0.85;
            }
        }
        &:active {
            i {
                transition: box-shadow 0.4s ease-in-out;
                box-shadow: 5px 5px 10px 0px rgba($black, 0.15) inset;
            }
        }
        &.blue-background-class {
			background-color: rgba($primary, 0.15);
        }
        img {
            max-height: 110px;
            max-width: 110px;
            padding: 10px;
        }
    }
}

.applications {
    &__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    &__connector {
        h2 {
            font-size: 1rem;
            font-weight: bold;
            span {
                padding-right: 10px;
                background-color: $white;
            }
            &::after {
                display: block;
                content: "";
                border-top: 2px dotted $primary;
                margin-top: -10px;
            }
        }
    }
}

@include media-breakpoint-down(md) {
    .application {
        &__item {
            width: $application-width-sm;
            height: $application-height-sm;
            padding: 1rem;

            i {
                font-size: 3.2rem;
                width: $application-icon-size-sm;
                height: $application-icon-size-sm;
            }
            &::after {
                line-height: 115px;
            }
            img {
                max-height: 60px;
                max-width: 60px;
            }
            span {
                font-size: 1.2rem;
            }
        }
    }
}

// APPLICATIONS AND CONNECTORS : ICONS AND COLORS
.application {
    font-family: "generic-icons";
    font-style: normal;
    border-radius: $border-radius;
    background: radial-gradient(farthest-side at 10% 10%, $gray-100, $gray-300);

    // ICON COLOR : RED
    &.admission-post-bac,
    &.admission-post-bac-large,

    &.assr,
    &.assr-large,

    &.canal-numerique,
    &.canal-numerique-large,

    &.cerise,
    &.cerise-large,

    &.charlemagne,
    &.charlemagne-large,

    &.edumoov,
    &.edumoov-large,

    &.electron,
    &.electron-large,

    &.glpi,
    &.glpi-large,

    &.madmagz,
    &.madmagz-large,

    &.matholycee,
    &.matholycee-large,

    &.mediacentre,
    &.mediacentre-large,
    &.public,
    &.public-large,

    &.notes,
    &.notes-large, 

    &.pages,
    &.pages-large,

    &.parametrage,
    &.parametrage-large,

    &.rbs,
    &.rbs-large,

    &.support,
    &.support-large,
    
    &.wiki,
    &.wiki-large,

    &.workspace,
    &.workspace-large {
        background: radial-gradient(farthest-side at 10% 10%, lighten($red, 20%), $red);
    }

    // ICON COLOR : ORANGE
    &.paths,
    &.paths-large,
    
    &.blog,
    &.blog-large,

    &.connecteur-generique1,
    &.connecteur-generique1-large,

    &.connecteur-generique2,
    &.connecteur-generique2-large,

    &.forum,
    &.forum-large,

    &.kne,
    &.kne-large,

    &.pronote,
    &.pronote-large,

    &.qwant-junior,
    &.qwant-junior-large,

    &.scolinfo,
    &.scolinfo-large,

    &.userbook,
    &.userbook-large {
        background: radial-gradient(farthest-side at 10% 10%, lighten($orange, 20%), $orange);
    }

    // ICON COLOR : YELLOW
    &.archive,
    &.archive-large,

    &.attendance,
    &.attendance-large,
    
    &.calendar,
    &.calendar-large,

    &.charte,
    &.charte-large, 

    &.conversation,
    &.conversation-large,

    &.edutheque,
    &.edutheque-large,

    &.le-site-tv,
    &.le-site-tv-large,

    &.library,
    &.library-large,

    &.madmagz,
    &.madmagz-large,

    &.maxicours,
    &.maxicours-large,

    &.monorientationenligne,
    &.monorientationenligne-large,

    &.note,
    &.note-large,
    
    &.timelinegenerator,
    &.timelinegenerator-large,

    &.turboself,
    &.turboself-large,

    &.vie-scolaire,
    &.vie-scolaire-large {
        background: radial-gradient(farthest-side at 10% 10%, lighten($yellow, 20%), $yellow)
    }

    // ICON COLOR : GREEN
    &.aide-devoirs,
    &.aide-devoirs-large,
    &.award,
    &.award-large,
    
    &.biblionisep,
    &.biblionisep-large,

    &.ccn,
    &.ccn-large,
    &.residence-artiste,
    &.residence-artiste-large,

    &.cidj,
    &.cidj-large,

    &.collaborative-wall,
    &.collaborative-wall-large,

    &.hiboutheque,
    &.hiboutheque-large,

    &.itopstore,
    &.itopstore-large,

    &.maxicours,
    &.maxicours-large,

    &.netvibes,
    &.netvibes-large,
    
    &.notebook,
    &.notebook-large,

    &.paraschool,
    &.paraschool-large,
    
    &.schoolbook,
    &.schoolbook-large,

    &.scrap-book,
    &.scrap-book-large {
        background: radial-gradient(farthest-side at 10% 10%, lighten($green, 20%), $green)
    }

    // ICON COLOR : CYAN
    &.assistance,
    &.assistance-large,

    &.banquesavoir,
    &.banquesavoir-large,

    &.cahier-textes,
    &.cahier-textes-large,
    &.cahier-de-texte,
    &.cahier-de-texte-large,

    &.cervoprint,
    &.cervoprint-large,

    &.edumedia,
    &.edumedia-large,

    &.europress,
    &.europress-large,

    &.gepi,
    &.gepi-large,

    &.lsu,
    &.lsu-large,
    
    &.mindmap,
    &.mindmap-large,

    &.monstageenligne,
    &.monstageenligne-large,

    &.onisep,
    &.onisep-large,
    &.webclasseur,
    &.webclasseur-large,
    
    &.onisep2,
    &.onisep2-large,
    
    &.pad,
    &.pad-large,

    &.pearltrees,
    &.pearltrees-large,
    
    &.poll,
    &.poll-large,

    &.pro-eps,
    &.pro-eps-large,

    &.rack,
    &.rack-large,

    &.universalis,
    &.universalis-large {
    background: radial-gradient(farthest-side at 10% 10%, lighten($cyan, 20%), $cyan)
    }

    // ICON COLOR : INDIGO
    &.educagri,
    &.educagri-large,

    &.elyceepicardie,
    &.elyceepicardie-large,

    &.esidoc,
    &.esidoc-large,

    &.lemonde,
    &.lemonde-large,

    &.lesechos,
    &.lesechos-large,

    &.museefrancaisphoto,
    &.museefrancaisphoto-large,

    &.pronote,
    &.pronote-large,

    &.ressourcesdepartementale91,
    &.ressourcesdepartementale91-large,
    
    &.sacoche,
    &.sacoche-large {
        background: radial-gradient(farthest-side at 10% 10%, lighten($indigo, 20%), $indigo)
    }

    // ICON COLOR : PURPLE
    &.account,
    &.account-large,

    &.actualites,
    &.actualites-large,
    
    &.admin,
    &.admin-large,

    &.bcdi,
    &.bcdi-large,
    
    &.community,
    &.community-large,

    &.cns,
    &.cns-large,
    
    &.exercizer,
    &.exercizer-large,

    &.picardie-cursus,
    &.picardie-cursus-large,

    &.settings-class,
    &.settings-class-large,

    &.sharebigfiles,
    &.sharebigfiles-large,

    &.stats,
    &.stats-large,

    &.statistics,
    &.statistics-large,
    
    &.visioconf,
    &.visioconf-large,
    &.Web-conference,
    &.Web-conference-large {
        background: radial-gradient(farthest-side at 10% 10%, lighten($purple, 20%), $purple)
    }

    // ICON COLOR : PINK
    &.unstagepourtous,
    &.unstagepourtous-large {
        background: radial-gradient(farthest-side at 10% 10%, lighten($pink, 20%), $pink)
    }

}

// Add class for applications 2D
.application {
    &.exercizer,
    &.exercizer-large,

    &.calendar,
    &.calendar-large,

    &.statistics,
    &.statistics-large,

    &.poll,
    &.poll-large,

    &.community,
    &.community-large,

    &.forum,
    &.forum-large,

    &.pages,
    &.pages-large,

    &.rbs,
    &.rbs-large,

    &.sharebigfiles,
    &.sharebigfiles-large,

    &.notes,
    &.notes-large {
        &::after {
            font-family: "Fira Sans";
            font-size: 1.4rem;
            content: "2D";
            position: absolute;
            top: 0;
            right: 10px;
            color: $white;
            width: 25px;
            height: 25px;
            line-height: 25px;
            background-color: $primary;
            border-radius: 50%;
        }
    }
}