.settings__container {
    position: relative;
}
.settings {
    margin-top: 1rem;
    gap: 1.5rem;
    position: relative;
    max-height: 220px;
    overflow: scroll;
    overflow-x: hidden;
    .setting {
        .setting__info {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
            h1 {
                font-size: 0.875rem;
                font-weight: 500;
                color: var(--secondary-color);
            }
            p {
                font-size: 0.6rem;
                font-weight: 400;
                color: var(--text-primary-color);
                width: 17rem;
            }
        }
    }
}
.avatars__container {
    position: relative;
    &:after {
        content: "";
        position: absolute;
        z-index: 1;
        top: 0;
        chrome_css_end: 0;
        bottom: 0;
        pointer-events: none;
        background: linear-gradient(270deg, rgba(247, 247, 247, 1) 0%, rgba(0, 0, 0, 0) 100%);
        width: 30px;
    }
    .avatars__images {
        display: flex;
        overflow: scroll;
        overflow-y: hidden;
        height: fit-content;
        position: relative;
        width: 245px;
        img.img-avatar {
            width: 70px;
            height: 70px;
            padding: 4px;
            border-radius: $radius * 2;
        }
        .img-avatar-selected {
            border: solid 3px grey;
        }
    }
}
