@import 'includes/vars';
@import 'includes/mixins';
@import 'main/components';

/*** Display ***/

#profile-head {
    background: $light-background-color;
    margin-bottom: $grid-spacing;
    min-height: 200px;
    overflow: hidden;
    padding: $grid-spacing;
    position: relative;

    b {
        color: #a19f93;
        font-weight: normal;
        set-larger-font-size();
    }

    .photo {
        margin: 0 0 ($grid-spacing / 2);
    }

    .extra {
        float: left;
    }

    .links {
        border-spacing: ($grid-spacing / 2);
        display: table;
        set-smaller-font-size();
        margin: -(@border-spacing); // Offset outer border

        li {
            display: table-row;
        }

        i, a {
            display: table-cell;
            vertical-align: middle;
        }

        i {
            set-font-size($base-font-size);
            text-align: center;
        }

        a {
            padding: 0;
        }
    }

    .edit > a {
        margin: 0 5px 0 0;
    }

    .submenu {
        @extend $advanced-menu;
    }

    .main {
        float: none;
        margin-left: 150px;
        width: auto;
    }

    .bio {
        set-smaller-font-size();
    }

    .info {
        li {
            display: inline;
            margin-right: ($grid-spacing / 2);

            &:before {
                color: #a19f93;
                content: '/';
                margin-right: @margin-right;
            }

            &:first-child:before {
                content: '';
                margin: 0;
            }
        }
    }

    .tags {
        margin-bottom: 5px;

        h2 {
            set-font-size($base-font-size);
            margin-bottom: 0;
        }

        li {
            display: inline;
            set-smaller-font-size();
            margin: 0 10px 0 0;
        }
    }

    .memberSince {
        color: #6a9412;
        set-smaller-font-size();
        font-style: italic;
    }

    .edit {
        position: absolute;
        top: @padding;
        right: @padding;

        & > a {
            float: left;
            margin-left: ($grid-spacing / 2);
        }
    }
}

.profile-section {
    clear: both;
    margin-bottom: $grid-spacing;
}

.gallery-foot {
    background: $light-background-color;
}

#docs-activity {
    header {
        margin-bottom: ($grid-spacing / 2);
        h2 {
            display: inline;
        }
    }
}

table.activity {
    border-collapse: collapse;
    set-smaller-font-size();
    width: 100%;

    td, th {
        padding: 6px 3px;
    }

    th {
        h3 {
            set-font-size($base-bump-font-size);
            margin: 0 0 ($grid-spacing / 4);
        }
        &.date {
            width: 120px;
        }
        &.page {
            width: 40%;
        }
    }

    thead {
        background: $header-background-color;
        th {
            font-weight: bold;
        }
    }

    tbody {
        h3 {
            margin-bottom: 4px;
        }

        tr {
            &:nth-child(even) {
                background: $light-background-color;
            }
        }

        th {
            font-weight: 200;
        }
    }

    .actions {
        set-font-size(10px);

        li {
            display: inline;
            margin: 0 10px 5px 0;
        }
    }
}


/*** Edit ***/

.profile-edit {
    /* Set forms to full width so that they resize with the column. */
    .section li > input[type='text'], select, textarea, #tagit-interests, #tags-expertise, legend {
        width: 100%;
        vendorize(box-sizing, border-box);
    }

    .extra {
        set-smaller-font-size();
        figcaption {
            margin: ($grid-spacing / 2) 0;
        }
    }

    .wordcount {
        .note {
            float: right;
        }
    }

    ul.tagit {
        background: #fff;
        border: 1px solid #cbc8b9;
        padding: 6px 8px;
        width: 610px;
    }

    li {
        .tag-expert {
            display: inline-block;
            margin: 0 10px 10px 0;

            label {
                background: #f9f9f9;
                border: 1px solid #dbd9d1;
                border-radius: 2px;
                font-weight: normal;
                margin: 0;
                padding: 3px 8px 3px 4px;
                &:hover {
                    border-color: #bbb;
                }
            }
        }
    }

    .submission {
        button {
            vendorize(box-shadow, inherit);
        }
    }
}

#profiles {
    label, .field-management {
        margin: 0 0 5px;
    }

    label {
        bidi-value(float, left, right);
        bidi-style(margin-right, 10px, margin-left, 10px);
    }

    .field-management {
        bidi-value(float, right, left);
    }

    .account {
        clear: both;
    }
}



#profile-edit {
    h1, > {$selector-icon}{
        bidi-value(float, left, right);

        /* Keep the font size and line height equal to make the icon appear as
           though it is on the same line. */
        font-size: 26px;
        line-height: 40px;
    }

    > {$selector-icon} {
        bidi-style(margin-left, 20px, margin-right, 20px);
    }

    fieldset {
        clear: both;
    }
}

/* Profile edit newsletter */
.profile-newsletter-container {
    background: #f4f7f8;
    padding: $grid-spacing;
    overflow: hidden;

    .fm-submit {
        margin-top: 0;
        margin-bottom: 0;
    }

    select {
        width: 80%;
    }
}

#apps-newsletter-subscribe {
    padding: 10px 0;

    b {
        position: static;
    }
}

#field_beta {
    @extend $checkbox-label-container;

    > p {
        clear: left;
    }
}

.profile-display, .profile-edit {
    .page-title {
        set-font-size(26px);
        letter-spacing: 0;
        margin-bottom: ($grid-spacing / 2);
    }
}

/* API key pages */
.profile-api-page {
    label {
        display: block;
    }
}

/* For tablet and lower, move the profile buttons below the user name */
@media $media-query-tablet {
    .profile-display {
        .edit {
            position: relative;
            top: auto;
            right: auto;
            margin: 0 0 $grid-spacing 0;

            a {
                float: none;
                display: inline-block;
                margin: 0 10px 0 0;
            }
        }
    }

    .profile-newsletter-container {
        margin-bottom: ($grid-spacing * 1.5);
    }
}

@media $media-query-small-mobile {
    .profile-display #profile-head .edit {
        margin: 0;

        & > a {
            display: block;
            text-align: center;
            margin: ($grid-spacing / 2) 0;
        }

        #edit-profile i {
            display: none;
        }

        .submenu {
            top: 90px;
        }
    }
}

@media $media-query-mobile {
    .profile-newsletter-container {
        #apps-newsletter-subscribe {
            margin: 0;
            padding: 0;
        }

        .fm-submit {
            display: none;
        }
    }
}
