.dominos.fallen {
    &.index {
        display: grid;
        grid-template-columns: repeat(auto-fit, MinMax(Min(100%, 330px), 1fr));
        gap: 1rem;
        justify-content: flex-start;

        .item {
            margin: 0;
            background-color: $white;

            .domino .top img {
                object-fit: cover;
            }
        }

        .domino-date {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
        }
    }

    &.large {
        .item {
            .domino {
                .top {
                    width: 150px;
                    height: 150px;
                }
            }
        }
    }

    .item {
        .domino {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;

            .top {
                float: none;
                aspect-ratio: 1 / 1;

                img {
                    width: 100%;
                    position: static !important;
                    object-fit: cover;
                }

                @media screen and (max-width: $tablette),
                print {
                    display: block;
                }
            }

            .correction-status {
                font-weight: 600;
            }

            .bottom {
                align-self: stretch;
                flex: 1;
                height: auto;
                margin-left: 0;
                background: transparent;

                .title {
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    font-size: 1rem;
                    font-weight: 600;
                    /*! autoprefixer: off */
                    -webkit-box-orient: vertical;
                    /* autoprefixer: on */


                    &:hover {
                        color: $flash-blue;
                    }
                }

                strong {
                    font-size: .875rem;
                    color: $grey-black;
                }

                .content {
                    padding: .75rem;

                    em {
                        color: $grey-graphite;

                        span {
                            color: currentColor;
                        }
                    }

                    span {
                        color: $grey-black;
                    }

                    >div:nth-child(2) {
                        flex-shrink: 0;
                    }

                    .buttons {
                        position: absolute;
                        top: .625rem;
                        right: .625rem;
                        height: calc(100% - 20px);
                        display: flex;
                        align-items: flex-end;
                        justify-content: flex-start;
                        flex-direction: column;
                    }

                    @media screen and (max-width: $tablette),
                    print {
                        flex-direction: row;
                        align-items: center;
                    }
                }

                .title-icon i {
                    color: $text-light;
                }
            }
        }
    }
}

.dominos .item {
    overflow: hidden;
}

.dominos .item .domino .due-date {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0;
    color: $grey-graphite;

    strong {
        color: inherit;
    }

    &>* {
        display: inline-block;
        vertical-align: middle;
        margin: 0;
    }

    &.delay {
        color: $red;

        > .icon-clock {
            fill: $red;
        }

        span {
            color: $red !important;
        }
    }
}

.dominos .item .domino .bottom .content {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    color: $grey-black;
}

.dominos .item .domino .score {
    font-size: 20px;
}

.dominos .domino-group-name {
    color: $flash-blue !important;
}

.dominos .item .domino .right-glider {
    overflow: hidden;
    font-size: 2em;
    color: white;
    height: 100%;
    padding: 0 10px;
    position: absolute;
    right: 0;
    transition: width 1s ease;
    width: 1%;
    min-width: 13px;

    a {
        font-size: large;
        position: absolute;
        color: white;
        opacity: 0;
        transition: opacity 0.5s ease-in 0s;

        @media screen and (max-width: $tablette),
        print {
            display: block;
            left: 35px;

            @media screen and (max-width: $fat-mobile),
            print {
                top: 50px;
            }

            @media screen and (min-width: $fat-mobile),
            print {
                top: 35px;
            }
        }

        @media screen and (min-width: $tablette),
        print {
            left: 50px;
            top: 40px;

            >i18n {
                white-space: nowrap;
            }
        }
    }

    span {
        color: white !important;
    }

    &:hover {

        @media screen and (max-width: $tablette),
        print {
            width: 140px;
        }

        @media screen and (min-width: $tablette),
        print {
            width: 250px;
        }

        a {
            opacity: 1;
            transition: all 1s ease-in 0s;
        }
    }

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

    &.grey {
        background-color: $grey-graphite;
    }

    span {
        top: 40%;
        position: relative;
    }
}