// ------------------------------------------------------------
// Users
//
// Styles for the Users list page
// Slug: /ghost/settings/users/
//
// * Container
// * Users List
// * Role Labels
// * User Actions
// * Invite User Modal
// ------------------------------------------------------------


//
// Wrapper
// --------------------------------------------------

.users-list-wrapper {
    overflow: auto;
    height: 100%;
}


//
// Users List
// --------------------------------------------------

.invited-users {
    margin-bottom: 34px;
}

.user-list-title {
    font-size: 13px;
    font-weight: normal;
    color: $midbrown;
    margin-bottom: 14px;
}

.user-list-item {

    border-top: 1px solid $lightbrown;

    @media (max-width: 550px) {
        display: block;
        padding: 15px 0;
        @include clearfix;
    }

    @media (min-width: 551px) {
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 0 15px;
        height: 68px;
    }
}

// Only apply these styles to anchor tags (pending invited are divs)
a.user-list-item {
    text-decoration: none;

    // Hover states only for large viewports
    @media (min-width: 601px) {

        &:hover {
            background: lighten($lightbrown, 5%);
        }

        &:last-of-type:hover {
            box-shadow: inset 0px -1px 0px $lightbrown;
        }
    }
}

.user-list-item-icon {
    width: 35px;
    height: 35px;
    display: block;
    border-radius: 100%;
    background: $lightbrown;
    font-size: 0px;
    color: transparent;
    overflow: hidden;
    position: relative;

    &:before {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin-top: -7px;
        text-align: center;
        color: $brown;
        font-size: 14px;
    }
}

.user-list-item-figure {
    width: 35px;
    height: 35px;
    display: block;
    border: 1px solid #979797;
    border-radius: 100%;
    background-size: cover;
    background-position: center center;
}

.user-list-item-icon,
.user-list-item-figure {

    @media (max-width: 550px) {
        float: left;
        margin-right: 15px;
    }
}

.user-list-item-body {
    flex: 1 1 auto;
    align-items: stretch;
    padding-left: 15px;
    line-height: 1;

    @media (max-width: 550px) {
        margin-top: 3px;
    }

    .name {
        display: inline-block;
        font-size: 15px;
        font-weight: 400;
        color: $darkgrey;
    }

    .description {
        display: inline-block;
        font-size: 12px;
        color: $midbrown;
        white-space: nowrap;
        margin-top: 3px;
    }

}//.user-list-item-body

.user-list-item-aside {

    @media (max-width: 550px) {
        float: left;
        width: 100%;
        margin: 12px 0 0 50px;
    }

    .user-list-action:not(:first-of-type) {
        margin-left: 20px;

        @media (min-width: 551px) {
            margin-left: 50px;
        }
    }

    .role-label {
        float: left;
        margin-top: -1px;
    }

    .role-label + .role-label {
        margin-left: 5px;
    }
}//.user-list-item-aside

.user-list-action {
    font-size: 11px;
    text-transform: uppercase;
    text-decoration: underline;
}


//
// Role Labels
// --------------------------------------------------

.role-label {
    display: inline-block;
    padding: 6px 8px;
    color: rgba(0,0,0,0.5);
    font-size: 9px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 400;
    background: #eee;

    &.owner {
        color: rgba(255,255,255,0.8);
        background: $darkgrey;
    }

    &.administrator {
        color: rgba(255,255,255,0.8);
        background: $red;
    }

    &.editor {
        color: rgba(255,255,255,0.8);
        background: $blue;
    }
}//.role-label


//
// Invite User Modal
// --------------------------------------------------

.invite-new-user {

    .modal-body {
        @include clearfix;
    }

    .form-group {

        margin-bottom: 0;
        padding: 0;

        label {
            position: static;
            display: block;
            text-align: left;
        }

        &:nth-of-type(1) {
            float: left;
            width: 60%;
        }

        &:nth-of-type(2) {
            float: left;
            width: 35%;
            margin-left: 5%;
        }

        input {
            width: 100%;
        }
    }//.form-group

    .btn-green {
        width: 100%;
    }
}//.invite-new-user