@import '../../../styles/variables';
@import '../../../styles/mixins';

$avatarsDistance: 2px;
$avatarTextFontSize: 12px;
$avatarTextFontWeight: 500;
$detailsIndent: 12px;
$avatarBorder: 1.5px;
$textLineHeight: 18px;

$avatarWrapperSmallSize: 23px;
$avatarWrapperBigSize: 33px;

@mixin disable-link-styles {
    a,
    a:hover,
    a:visited,
    a:active {
        color: inherit;
        text-decoration: none;
        display: flex;
    }

    a {
        cursor: pointer;
    }
}

.contributor-avatars {
    &__one_contributor {
        display: flex;
        margin: 0 $avatarBorder;
        @include disable-link-styles;

        & > * {
            @include contributors-text();
        }

        @media screen and (max-width: map-get($screenBreakpoints, 'sm')) {
            &_onlyAuthor > *:last-child {
                margin-left: 5px;
            }

            & > *:last-child,
            & > .desktop {
                display: none;
            }

            &_onlyAuthor > *:last-child {
                display: block;
            }

            & > *:not(:last-child) {
                margin-right: 0px;
            }
        }

        @media screen and (min-width: map-get($screenBreakpoints, 'sm')) {
            & > .mobile {
                display: none;
            }

            & > *:last-child {
                margin-right: 0px;
            }
        }
    }

    &__avatar {
        & {
            border-radius: 50%;
            box-shadow: 0 0 0 $avatarBorder var(--yc-color-line-generic-accent);
        }

        &_size_small {
            height: $avatarWrapperSmallSize;
            width: $avatarWrapperSmallSize;
        }

        &_size_big {
            height: $avatarWrapperBigSize;
            width: $avatarWrapperBigSize;
        }

        &_default {
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: $avatarTextFontSize;
            font-weight: $avatarTextFontWeight;
        }
    }

    &__displayed_avatars {
        display: flex;
        @include disable-link-styles;

        & > * {
            margin-left: $avatarBorder;
            margin-right: calc(#{$avatarBorder} + #{$avatarsDistance});
        }
    }

    &__hidden_avatars {
        font-size: $avatarTextFontSize;
        font-weight: $avatarTextFontWeight;
        color: var(--yc-color-text-secondary);
        border-radius: 50%;
        text-align: center;
        cursor: pointer;

        & > * {
            background: var(--yc-color-base-misc);
            flex-direction: column;
            text-align: center;
            display: flex;
            justify-content: center;
            padding-left: 3px;
            padding-right: 1px;
            margin: 0 $avatarBorder;
            box-shadow: 0 0 0 $avatarBorder var(--yc-color-line-generic-accent);
        }
    }

    &__details {
        display: flex;

        & > div:last-child {
            font-size: 13px;
            font-weight: 400;
            margin: auto $detailsIndent;
        }
    }

    &__details_name {
        color: var(--yc-color-text-primary);
        line-height: $textLineHeight;
    }

    &__popup {
        box-shadow: 0px 3px 24px rgba(0, 0, 0, 0.2);
        @include disable-link-styles;

        & > *:not(:first-child) {
            margin: $detailsIndent;
        }
    }
}