$ddpurple: #632ca6;

.whatsnext {
    font-size: 18px;
    line-height: 22px;
    .list-group {
        padding-left: 0px;
    }
    .list-group-item {
        margin-bottom: 0;
        padding: 0.65rem 0.75rem;

        &:first-child {
            border-top-left-radius: 2px;
            border-top-right-radius: 2px;
        }
        &:last-child {
            border-bottom: 1px solid rgba(0, 0, 0, 0.125);
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px;
            &:hover {
                border-bottom: 1px solid $ddpurple;
            }
        }
        img {
            max-width: 24px;
        }
        .hover {
            display: none;
        }
        .badge {
            font-weight: 200;
            font-size: 14px;
            color: #555;
            letter-spacing: 0.04em;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            &:lang(ja) {
                font-size: 12px;
                line-height: 17px;
            }
        }
        .text {
            &:lang(ja) {
                font-size: 15px;
                line-height: 25px;
            }
        }
    }
    a.list-group-item-white:focus,
    a.list-group-item-white:hover,
    button.list-group-item-white:focus,
    button.list-group-item-white:hover {
        color: $ddpurple;
        background-color: white;
        border-color: rgba(0, 0, 0, 0.125);
        box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.4);
        .badge {
            color: $ddpurple;
            border-color: transparent;
            background-color: transparent;
        }
    }
    .list-group-item:last-child:hover {
        border-bottom: 1px solid transparent;
    }
}
@media (max-width: 575px) {
    .whatsnext {
        .badge {
            display: none;
        }
    }
}

@media (min-width: 576px) {
    .whatsnext {
        .list-group-item {
            &:hover,
            &.active {
                & .hover {
                    display: inline;
                }
                & .static {
                    display: none;
                }
            }
        }
    }
}
