/* GLOBAL */

.thumb_user {
    height: 35px;
    width: 35px;
    border-radius: 10px;
    overflow: hidden;
}

.thumb_user a,
.thumb_user img {
    height: 100%;
    width: 100%;
}

.thumb_user img {
    object-fit: cover;
}


/* CARD USER */

.card_user {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.card_user h3 {
    font-size: 28px;
    font-weight: bold;
}

.card_user h4 {
    font-size: 14px;
    opacity: .7;
}

.card_user .tips_see_user {
    position: absolute;
    bottom: 10px;
    left: 115px;
    text-align: right;
    font-size: 12px;
    opacity: 0;
    transform: translateY(-10px);
}

.animated .tips_see_user {
    animation-name: anim-tips;
    animation-duration: 300ms;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-delay: 500ms;
}

@keyframes anim-tips {
    to {
        opacity: .4;
        transform: translateY(0);
    }
}


/* ADD TO PLAYLIST */

.infos_cover_thumb {
    width: calc(100% - 40px);
    display: flex;
    justify-content: space-between;
}

.add_to_playlist svg {
    height: 25px;
    opacity: 1;
    fill: var(--primary)!important;
}

.add_to_playlist .picto_added {
    display: none;
}

.picto_add > svg {
	animation-name: shake;
	animation-duration: 1s;
	transform-origin:50% 50%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.picto_add:hover > svg,
.picto_add:focus > svg {
    animation-play-state: paused;
}

.picto_add:focus {
    transform: scale(.8);
}

@keyframes shake {
	10%, 90% {
        transform: translate3d(-1px, 0, 0);
      }

      20%, 80% {
        transform: translate3d(2px, 0, 0);
      }

      30%, 50%, 70% {
        transform: translate3d(-3px, 0, 0);
      }

      40%, 60% {
        transform: translate3d(3px, 0, 0);
      }
}

.allready_in_playlist .picto_add {
    display: none;
}

.allready_in_playlist .picto_added {
    display: block;
}

.picto_added > :last-child {
    display: none;
    fill : var(--danger)!important
}

.picto_added:hover > :last-child {
    display: block;
}

.picto_added:hover > :first-child {
    display: none;
}