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

#modal.edit-profile {
    max-width:850px !important;
    padding:35px 15px;
    @include width-medium() {
        padding:35px;
    }
    .lhs {
        margin-bottom:15px;
        @include width-medium() {
            padding-right:20px;
            margin-bottom:0;
        }
    }
    .rhs {
        @include width-medium() {
            padding-left:20px;
            border-left:1px solid #eee;
        }
        h3 {
            color:#444;
            @include font-size(15, 15);
            font-weight:$regular;
            margin-bottom:10px;
        }
    }
    .pure-g {
        margin-bottom:25px;
    }

    h2 {
        @include font-size(20, 20);
        font-weight:$regular;
        margin-bottom:8px;
    }
    .h2-subtitle {
        @include font-size(14, 14);
        color:#999;
        margin-bottom:20px;
    }
    .name-section,
    .bio-section {
        overflow:hidden;
        h3 {
            float:left;
            width:60px;
            color:#444;
            @include font-size(14, 14);
            font-weight:$regular;
        }
    }
    .name-section,
    .bio-section {
        h3 {
            padding-top:10px;
            margin-bottom:10px;
            @include width-medium() {
                margin-bottom:0;
            }
        }
        input,
        textarea {
            @include font-size(14, 18);
            color:#555;
            border:1px solid #ddd;
            padding:8px;
            border-radius:2px;
            width:100%;
        }
    }

    .name-section {
        margin-bottom:15px;
    }
    .bio-section {
        textarea {
            height:89px;
            resize:none;
        }
    }
    .field {
        position:relative;
        margin-bottom:10px;
        i {
            position:absolute;
            top:11px;
            left:12px;
            color:#aaa;
            border-right:1px solid #ccc;
            padding-right:11px;
        }
        input {
            width:100%;
            @include font-size(14, 18);
            background:#fdfdfd;
            color:#555;
            font-weight:$regular;
            border:1px solid #ddd;
            padding:8px 5px 8px 44px;
            border-radius:2px;
        }
        &.twitter,
        &.medium,
        &.github {
            &:before {
                content: "https://twitter.com/";
                position:absolute;
                top:9px;
                left:45px;
                color:#bbb;
                font-weight:$regular;
                @include font-size(14, 18);
            }
            input {
                padding-left:165px;
            }
        }
        &.twitter {
            &:before { content: "https://twitter.com/"; }
            input { padding-left:172px; }
        }
        &.medium {
            &:before { content: "https://medium.com/"; }
            input { padding-left:184px; }
        }
        &.github {
            &:before { content: "https://github.com/"; }
            input { padding-left:173px; }
        }
    }
    .pure-button {
        background:$color-1;
        padding:12px;
        width:100%;
        &.update-button {
            width:100%;
            margin-bottom:15px;
            @include width-small() {
                width:70%;
                margin-right:3%;
                margin-bottom:15px;
            }
        }
        &.cancel-button {
            width:100%;
            margin-bottom:30px;
            border:1px solid $color-1;
            color:$color-1;
            background:#fff;
            @include width-small() {
                width:25%;
                margin-bottom:15px;
            }
        }
    }
}
