@import "../../../../css/static/mixin";
@import "../../../../css/static/properties";

.container {
    display: flex;
    flex-direction: column;

    padding: 1em;
    width: 30em;

    &.windowed {
        height: 100%;
        width: 100%;
    }
}

.containerSelect {
    display: flex;
    flex-direction: column;

    .containerFile {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;

        .button {
            margin-right: .5em;
        }

        .name {
            align-self: center;

            @include text-dotdotdot();
        }
    }

    .containerLimit {
        margin-top: .1em;
        margin-left: .25em;

        font-size: .9em;
        color: #666;

        &.error {
            color: #a32929;
        }
    }
}

.containerPreview {
    display: flex;
    flex-direction: column;

    margin-top: 1em;

    .title {
        color: #557edc;
        text-transform: uppercase;
    }

    .previews {
        margin-top: .5em;

        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }
}


.preview {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    width: 10em;

    .imageContainer {
        width: 1em;
        height: 1em;
        border-radius: 50%;

        display: flex;
        flex-direction: column;
        justify-content: center;

        overflow: hidden;
        align-self: center;

        //background: #353535;
        box-shadow: inset 0 0 5px #00000040;

        .image {
            align-self: center;

            max-height: 100%;
            max-width: 100%;

            /* We currently strech all avatars */
            /*
            &.heightBound {
                height: 100%;
            }

            &.widthBound {
                width: 100%;
            }
            */

            width: 100%;
            height: 100%;
        }

        &.sizeChatInfo {
            height: 10em;
            width: 10em;
        }

        &.sizeChat {
            height: 2.5em;
            width: 2.5em;
        }
    }

    .name {
        margin-top: 1em;
        text-align: center;
    }
}

.buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    padding-top: 1em;
    margin-top: auto;
}