.public-user {
    position: relative;
    width: 100%;

    .user-head {
        position: relative;
        z-index: 69;
        border-radius: 6px;
        border: 1px solid var(--color-grey-semi-dark);
        background-color: var(--color-grey-dark);

        @media only screen and (min-width: 576px) {
            width: calc(100% + var(--space-lg) * 2);
            height: 160px;
            margin: var(--space-3xl) calc(-1 * var(--space-lg)) var(--space-lg);
        }

        @media only screen and (max-width: 575px) {
            width: 100%;
            height: 120px;
            margin: var(--space-lg) 0;

            &::after {
                content: '';
                position: absolute;
                z-index: 4;
                top: 0;
                right: 0;
                width: 80px;
                height: 100%;
                background: linear-gradient(270deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
                pointer-events: none;
                border-radius: 5px;
            }
        }
    }

    .user-bg {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        background-color: inherit;
        border-radius: 5px;
        overflow: hidden;
        pointer-events: none;

        img {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            font-size: 14px;
            object-fit: cover;
            pointer-events: none;
            transition: opacity 0.2s ease-in-out;
            transform: scale(1.02);
        }

        &.user-bg--gradient {
            &::after {
                content: '';
                position: absolute;
                z-index: 2;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 48px;
                background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
            }
        }

        .user-bg__def {
            position: relative;
            z-index: 2;
            width: 100%;
            height: 100%;
            background-repeat: repeat;
            background-color: var(--color-grey-dark);
        }
    }

    .user-interests {
        position: absolute;
        z-index: 2;
        left: 0;

        display: flex;
        align-items: center;
        gap: var(--space-xs);

        @media only screen and (min-width: 576px) {
            max-width: 90%;
            bottom: 0;
            padding: var(--space-sm);
        }

        @media only screen and (min-width: 576px) and (max-width: 767px) {
            flex-wrap: wrap;
            align-items: flex-start;
        }

        @media only screen and (max-width: 575px) {
            width: 100%;
            padding-left: var(--space-sm);
            bottom: var(--space-sm);

            &.hide-dropdown {
                padding: 0;

                .user-interests__wrap-mobile {
                    border-radius: 0;
                }

                .user-interests__scroll-mobile {
                    padding: 0 25vw 0 var(--space-sm);
                }
            }
        }

        .user-interests__wrap-mobile {
            width: auto;

            @media only screen and (max-width: 575px) {
                height: 24px;
                overflow: hidden;
                border-radius: 4px 0 0 4px;
            }
        }

        .user-interests__scroll-mobile {
            position: relative;
            width: 100%;
            display: flex;
            gap: var(--space-xs);

            @media only screen and (min-width: 576px) {
                flex-wrap: wrap;
            }

            @media only screen and (max-width: 575px) {
                height: 100px;
                overflow-y: hidden;
                overflow-x: auto;
                padding: 0 13vw 0 0;
            }
        }

        .base-dropdown {
            flex: 0 0 auto;

            & > .btn {
                span {
                    max-width: 200px;
                }

                @media only screen and (max-width: 575px) {
                    display: flex;
                    align-items: center;
                    height: 24px;
                    font-size: var(--font-size-small);
                    padding: 2px 9px;
                }
            }

            .no-active {
                cursor: default;
                opacity: 0.35;
                pointer-events: none;

                a {
                    cursor: inherit;
                }
            }

            @media only screen and (max-width: 575px) {
                .dropdown-menu {
                    width: 60vw !important;
                }
            }
        }
    }


    .user-stats {
        position: relative;
        display: flex;
        gap: var(--space-xl);

        @media only screen and (max-width: 575px) {
            gap: var(--space-lg);
        }

        .user-stats__col {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .user-stats__val {
            font-size: var(--font-size-title);
            font-weight: 700;
            line-height: var(--line-height-headline);

            @media only screen and (max-width: 575px) {
                font-size: var(--font-size-regular);
            }
        }

        .user-stats__label {
            color: var(--color-grey-semi-light);
            font-size: var(--font-size-regular);
            line-height: var(--line-height-regular);

            @media only screen and (max-width: 575px) {
                font-size: var(--font-size-small);
                line-height: var(--line-height-small);
            }
        }
    }

    .user-bio {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        max-width: 600px;
        width: 100%;
        margin-bottom: var(--space-3xl);
        text-align: left;

        &.user-bio--empty {
            margin-bottom: var(--space-xl);
        }

        .user-bio__content {
            display: flex;
            flex-direction: column;
            gap: var(--space-xs);
        }

        .user-bio__follow {
            @media only screen and (min-width: 576px) {
                display: none;
            }

            @media only screen and (max-width: 575px) {
                width: 100%;

                .btn {
                    width: 100%;
                }
            }
        }

        .user-bio__meta {
            .user-bio__meta-label {
                color: var(--color-grey-medium);
                font-size: var(--font-size-regular);
                font-weight: 700;
                line-height: var(--line-height-headline);

                @media only screen and (max-width: 575px) {
                    font-size: var(--font-size-small);
                    line-height: var(--line-height-small);
                }
            }

            .user-bio__meta-value {
                color: var(--color-grey-semi-light);
                font-size: var(--font-size-regular);
                line-height: var(--line-height-headline);

                @media only screen and (max-width: 575px) {
                    font-size: var(--font-size-small);
                    line-height: var(--line-height-small);
                }
            }
        }

        .user-bio__descr {
            .user-bio__descr-text {
                color: var(--color-grey-semi-light);
                font-size: var(--font-size-regular);
                line-height: var(--line-height-headline);
                margin: 0;
                display: flex;
                gap: 4px;
                width: 100%;
                overflow: hidden;

                @media only screen and (max-width: 575px) {
                    font-size: var(--font-size-small);
                    line-height: var(--line-height-small);
                }
            }

            [data-text-expand-content] {
                display: inline-block;
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            [data-text-expand-toggle] {
                display: none;
                text-decoration: none !important;
                color: var(--main-color);
                white-space: nowrap;
            }

            &.text-expand-open {
                [data-text-expand-content] {
                    display: inline;
                    width: auto;
                    white-space: normal;
                    overflow: visible;
                    text-overflow: unset;
                }

                .user-bio__descr-text {
                    display: inline-block;
                }
            }

            .user-bio__descr-edit {
                position: relative;
                width: 100%;
                display: none;

                .user-bio__descr-edit-input {
                    position: relative;
                    width: 100%;
                    height: 72px;
                    border-radius: 4px;
                    overflow: hidden;
                    background-color: var(--color-grey-light);
                    border: 1px solid var(--color-grey-light);
                    margin-bottom: 8px;

                    & textarea {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        resize: none;
                        background-color: inherit;
                        border: none;
                        padding: 6px 8px;
                        outline: none;
                        color: var(--color-grey-dark);
                        font-size: var(--font-size-regular);
                        line-height: var(--line-height-secondary);
                    }
                }

                .user-bio__descr-edit-btns {
                    position: relative;
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    gap: 8px;
                }
            }
        }

        .user-bio__actions {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-sm);
        }

        .user-bio__action {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: var(--space-xxs);

            font-size: var(--font-size-small);
            line-height: 18px;
            padding-top: var(--space-xxs);
            padding-bottom: var(--space-xxs);

            .user-bio__action-input {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                opacity: 0;
                pointer-events: none;
                z-index: -1;
            }
        }
    }

    .user-tags {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .user-tags__actions {
            width: 100%;
            display: flex;
            margin-bottom: var(--space-3xl);

            .btn-group .btn-username {
                display: flex;
                align-items: center;

                span {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 130px;
                }
            }

            @media only screen and (max-width: 575px) {
                .btn-group .btn {
                    font-size: var(--font-size-secondary);
                }
            }
        }

        .user-tags__content {
            position: relative;
            width: 100%;
            background-color: var(--color-black);
        }

        .user-tag-panel {
            position: relative;
            width: 100%;

            &.user-tag-panel--top-comments .comment-item {
                &:nth-of-type(1) {
                    border-top: 1px solid var(--color-grey-semi-dark);
                }

                @media screen and (min-width: 768px) {
                    &:nth-of-type(2) {
                        border-top: 1px solid var(--color-grey-semi-dark);
                    }
                }

                &:nth-of-type(1) {
                    padding-top: 16px;
                }
            }

            &.user-tag-panel--profile-comments .comments {
                margin-top: 4px;
            }

            .user-tag-panel__header {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                flex-wrap: wrap;
                gap: var(--space-md);
                margin-bottom: var(--space-lg);
            }

            .user-tag-panel__header-title {
                font-size: var(--font-size-title);
                font-weight: 700;
                line-height: var(--line-height-title);
                margin: 0;
            }

            @media only screen and (min-width: 1200px) {
                &.user-tag-panel--home .video-thumb {
                    margin: 0 !important;
                }

                .pos-left {
                    display: flex;
                    flex-wrap: wrap;

                    &.pos-left--g-4 {
                        gap: 4px;
                    }

                    &.pos-left--g-6 {
                        gap: 6px;
                    }
                }
            }
        }

        .btn.active {
            background-color: var(--main-color) !important;
            color: var(--color-black) !important;
            border-color: var(--main-color) !important;
        }

        .btn-user-comments {
            @media only screen and (max-width: 767px) {
                display: none !important;
            }
        }

        .dropdown-user-comments {
            .dropdown-toggle {
                width: 100%;
                border-radius: 0;
            }

            @media only screen and (min-width: 768px) {
                display: none;
            }

            @media only screen and (max-width: 767px) {
                margin-top: -1px;
                margin-left: -1px;

                .dropdown-toggle {
                    border-bottom-right-radius: var(--space-xs);
                }

                .dropdown-menu {
                    width: 100%;
                }

                button.dropdown-item {
                    display: flex;
                    align-items: center;

                    span {
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }

            @media only screen and (max-width: 575px) {
                .dropdown-menu--mod {
                    width: calc(100vw - (15px * 2));
                    inset: 0px auto auto 0px !important;
                    transform: translate3d(-50%, 36px, 0px) !important;
                }
            }
        }

        .clips-index .video-thumb {
            margin: 0 var(--space-xxs) var(--space-3xl) var(--space-xxs);
        }

        @media screen and (min-width: 768px) {
            .clips-index .video-thumb {
                width: 262px;
            }

            .bookmark-video .video-thumb {
                width: 265px;
            }
        }

        @media only screen and (max-width: 767px) {
            .grid-view-2-mod {
                .dropdown-user-comments {
                    grid-column-start: 1;
                    grid-column-end: 3;

                    .dropdown-toggle {
                        border-bottom-right-radius: var(--space-xs);
                        border-bottom-left-radius: var(--space-xs) !important;
                    }
                }
            }
        }
    }

    .user-comments {
        max-width: 100%;
        margin: 0 auto;

        .comments {
            margin-top: 32px;

            .comment .message {
                width: calc(100% - 60px);
            }
        }
    }

    .user-tag-empty {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .user-tag-empty__title {
            font-size: var(--font-size-title);
            font-weight: 700;
            line-height: var(--line-height-title);
            margin-bottom: var(--space-lg);
        }

        .user-tag-empty__video {
            position: relative;
            width: 100%;
            height: 480px;

            @media (max-width: 991px) {
                height: auto;
                padding-bottom: 45%;
            }
        }
    }


    @media only screen and (min-width: 576px) {
        padding: 0 var(--space-lg);
    }

    .ajax-loader {
        padding: 0;
        margin-bottom: var(--space-3xl);

        @media only screen and (max-width: 575px) {
            font-size: var(--font-size-secondary);
        }
    }
}