@import 'variables';
@import 'mixins';

#modal.edit-profile {
    .avatar-section {
        overflow: hidden;
        margin-bottom: 25px;

        > *:last-child {
            display:flex;
            align-items:stretch;
        }

        h3 {
            display: inline-block;
            vertical-align: top;
            width: 60px;
            padding-top: 5px;
            margin-bottom:10px;
            @include width-medium() {
                margin-bottom:0;
            }

            @include font-size(14, 14);
            color: #444;
            font-weight: $regular;
        }

        .image-preview {
            vertical-align: top;
            height: 80px;
            width: 80px;
            flex: 0 0 80px;
            margin:0px 20px 5px 0;
            border-radius: 2px;

            background-position: center;
            background-size: cover;

            @include width-small() {
                display:inline-block;
                margin-top:0;
            }
        }

        .file-selector-section {
            display: inline-block;
            .file-selector {
                text-align: center;
            }
            // width: 200px;
        }

        .text-hint {
            @include font-size(12, 15);
            color: #aaa;
            max-width:200px;
        }

        .errors {
            margin-top: 10px;
        }

        .text-error {
            @include font-size(12, 15);
            color: red;
        }
    }
}
