/* Icon */

span.icon {
    font-size: 3rem;
    line-height: 5rem;
    text-align: center;
    background-size: cover;
    background-position: center;
    position: relative;
    word-break: keep-all;
}

span.icon.spin,
i.spin {
    animation: spin 2s linear infinite;
}

span.icon img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

span.icon.top {
    position: relative;
    top: -1.5rem;
    width: 100%;
    height: 10rem;
    line-height: 10rem;
    display: block;
    margin: 0;
    left: 0;
}

span.icon.top.preview {
    height: 25rem;
}

span.icon.primary.thumb,
span.icon.control.thumb {
    width: 7rem;
    line-height: 7rem;
    margin-right: -1.5rem;
    align-self: stretch;
    height: auto;
    text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
}

span.icon.primary.thumb {
    margin-left: -1.5rem;
    margin-right: 0.5rem;
}

span.primary.overflow {
    margin-left: -4.5rem;
    margin-right: 0;
}

span.icon.bubble {
    border-radius: 5rem;
    font-size: 2.25rem;
    user-select: none;
    -moz-user-select: none;
    height: 5rem;
}

span.icon.bubble img:not(.emoji) {
    border-radius: 5rem;
}

span.icon.bubble>i,
span.icon.bubble>a>i {
    font-size: 3rem;
    line-height: 5rem;
}

ul.list li span.icon.small {
    height: 4rem;
    line-height: 3.5rem;
    font-size: 0;
    /* Only display the first letter */
    flex: 0 0 4rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

ul.list li span.icon.small img.emoji {
    width: 1.75rem;
    height: 4rem;
}

ul.list li span.icon.small:not(.bubble)>i {
    font-size: 3rem;
    line-height: 3rem;
}

span.icon.small.bubble:first-letter,
span.icon.small.bubble>i,
span.icon.small.bubble>a>i {
    font-size: 2.25rem;
    line-height: 4rem;
}

span.icon.bubble.status {
    border-radius: 0;
    mask-size: 100%;
    mask-origin: content-box;
    mask-repeat: no-repeat;
}

span.icon.bubble.stories.status {
    mask-origin: fill-box;
    background: linear-gradient(to top right, var(--p-orange), var(--p-pink));
    transition: transform 0.2s ease-in-out;
}

span.icon.bubble.stories.status.seen {
    background: none;
    background-color: rgba(var(--movim-font), 0.25);
}

span.icon.bubble.stories.status:hover {
    transform: scale(.95);
}

span.icon.bubble.stories.status:active {
    transform: scale(.925);
}

span.icon.bubble.status:not(.composing):not([data-counter]):not(.location) {
    mask-image: url(../img/avatar_mask.svg);
    -webkit-mask-origin: unset;
    mask-origin: unset;
}

span.icon.bubble.stories.composing,
span.icon.bubble.stories[data-counter]:not(.composing):not(.location) {
    mask-image: url(../img/avatar_mask_notifs_stories.svg);
}

span.icon.bubble.status.stories:not(.composing):not([data-counter]):not(.location) {
    mask-image: url(../img/avatar_mask_stories.svg);
}

span.icon.bubble.status.dnd:not(.composing):not([data-counter]):not(.location) {
    mask-image: url(../img/avatar_mask_dnd.svg);
}

span.icon.bubble.status.dnd.stories:not(.composing):not([data-counter]):not(.location) {
    mask-image: url(../img/avatar_mask_dnd_stories.svg);
}

span.icon.bubble.status.away:not(.composing):not([data-counter]):not(.location) {
    mask-image: url(../img/avatar_mask_away.svg);
}

span.icon.bubble.status.away.stories:not(.composing):not([data-counter]):not(.location) {
    mask-image: url(../img/avatar_mask_away_stories.svg);
}

span.icon.bubble.status.xa:not(.composing):not([data-counter]):not(.location) {
    mask-image: url(../img/avatar_mask_xa.svg);
}

span.icon.bubble.status.xa.stories:not(.composing):not([data-counter]):not(.location) {
    mask-image: url(../img/avatar_mask_xa_stories.svg);
}

span.icon.bubble.status.location {
    mask-image: url(../img/avatar_mask_location.svg);
}

span.icon.bubble.status.location.stories {
    mask-image: url(../img/avatar_mask_location_stories.svg);
}

span.icon span.counter,
span.icon[data-counter]:after,
span.icon.composing:after,
span.icon.status:after {
    content: '';
    display: block;
    min-width: 2rem;
    height: 2rem;
    font-size: 1.5rem;
    line-height: 2rem;
    right: calc(50% - 2.75rem);
    top: calc(50% + 0.5rem);
    position: absolute;
    transition: border-radius 0.25s var(--standard-easing);
    border-radius: 2em;
    background-color: #DDD;
    box-shadow: var(--elevation-0);
}

span.icon span.counter,
span.icon[data-counter]:after,
span.icon.composing:after {
    padding: 0 0.25rem;
    min-width: 1.5rem;
    box-shadow: var(--elevation-1);
}

/* Counter */

span.icon[data-counter]:after {
    border-radius: 0.5rem;
    content: attr(data-counter);
}

/* Composing */

span.icon.composing:after {
    content: '…';
    line-height: 1rem;
    z-index: 1;
    font-size: 2rem;
    font-weight: bold;
    border-radius: 0.5rem;
    animation: fadetext 1.5s infinite;
}

/* Weird bug */
span.icon.small.status:after {
    border-radius: 2rem;
}

span.icon.small span.counter,
span.icon.small.composing:after {
    top: 2.25rem;
}

span.icon.small.status:after {
    top: 2.4rem;
    min-width: 1.5rem;
    height: 1.5rem;
    right: calc(50% - 2.1rem);
}

main ul li .control>i {
    margin-left: 0;
}

/* Counter */

span.icon span.counter {
    border-radius: 0.5rem;
}

span.icon span.counter:empty {
    display: none;
}

span.icon span.counter>i {
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}

/* Text icon */
i.icon-text {
    font-size: 2.5rem;
    margin: 0 0.25rem;
    line-height: 3rem;
    vertical-align: middle;
}

/* Tiny icon */
p span.icon.tiny {
    width: 2rem;
    height: 2rem;
    display: inline-block;
    margin-right: 0.5rem;
    vertical-align: text-top;
    font-size: 1rem;
    line-height: 2rem;
}

p span.icon.tiny:not(:first-child) {
    margin-left: 0.75rem;
}