/* user avatars, with fallback to placeholder graphic if no gravatar exists */
.avatar{
    @include border-radius(100%);
    position:relative;
    display:inline-block;
    width:50px;
    height:50px;

    a{
        position:absolute;
        z-index:2;
        left:0;
        display:block;
        width:100%;
        height:50px;
    }
    img{
        z-index:2;
        position:relative;
        @include border-radius(100%);
        border:0;
    }

    &:before{
        @include border-radius(100%);
        color:$color-grey-3;
        border: 2px solid $color-grey-3;
        text-align:center;
        display:block;
        width:42px;
        height:42px;
        margin:2px 0 0 2px;
        line-height:42px;
        position:absolute;
        z-index:1;
        left:0;
    }
    &:hover:before{
        color:$color-grey-3;
        border-color:$color-grey-3;
    }

    &.small{
        vertical-align:middle;
        margin:0 0.5em;
        width:25px;
        height:25px;

        &:before{
            margin:1px 0 0 1px;
            width:22px;
            height:22px;
            line-height:22px;
            border-width:1px;
            font-size:1em;
        }
        img{
            border:0;
        }
        &:hover:before{
            color:$color-grey-3;
            border-color:$color-grey-3;
        }
    }
}

.media-placeholder {
    width: 600px;
    height: 400px;
    background-color: #CCC;
    padding: 5px;
    h3, p {
        margin: 0;
    }
    img {
        max-width: 350px;
        max-height: 350px;
        margin: 20px;
    }
}

/* Displays "timesince" formatted date with full date on hover */
.human-readable-date{
    overflow:hidden;
    display:block;
    position:relative;

    &:before{
        position:absolute;
        display:none;
        content:attr(title);
    }

    &:hover{
        visibility:hidden;

        &:before{
            visibility:visible;
            display:block;
        }
    }
}

/* makes a link look like regular text */
.nolink{
    color:$color-text-base;

    &:hover{
        color:$color-teal;
    }
}

/* Status tags */
.status-tag{
    text-align:center;
    display:inline-block;
    @include border-radius(2px);
    text-transform:uppercase;
    padding:0em 0.5em;
    border:1px solid lighten($color-grey-2,30%);
    color:lighten($color-grey-2,30%);
    -webkit-font-smoothing: auto;
    font-size:0.80em;
    margin:0 0.5em 0.5em 0.5em;
    background:white url("#{$static-root}bg-dark-diag.svg");

    &.primary{
        color:$color-grey-2;
        border:1px solid $color-grey-2;
        background:white
    }
}
form.status-tag:hover,
a.status-tag:hover,
a.status-tag.primary:hover{
    border-color:$color-teal;
    color:$color-teal;
}
form.status-tag:hover{
    border-color:$color-teal-dark;
    background-color:$color-teal-darker;
    color:white;
}

.privacy-indicator {
    .label-private, .label-public{
        &:before{
            font-size:1.5em;
            color:$color-teal;
        }
    }
    &.public {
        .label-private { 
            display: none;
        }
    }
    &.private {
        .label-public {
            display: none;
        }
    }
}


/* free tagging tags from taggit */
.tag{
    background-color:$color-teal;
    padding-right:0.5em;
    padding:0.2em 0.5em;
    color:white;
    line-height:2em;
    white-space: nowrap;
    @include border-radius(2px);


    &:before{
        font-family:wagtail;
        display:inline-block;
        color:white;
        content:"u";
        padding-right:0.5em;
    }

    .taglist &{
        margin-right:0.8em;
    }
}
a.tag:hover{
    background-color:$color-teal-darker;
    color:white;
}


.taglist {
    font-size:0.9em;
    line-height:2.4em;
    h3{
        display:inline;
        margin-right:1em;
    }
}

/* Loading mask: overlays a certain area with a loading spinner and a faded out cover to prevent interaction */
.loading-mask{
    &.loading{
        position:relative;

        &:before, &:after{
            position:absolute;
            display:block;
        }

        &:before{
            content:"";
            top:-5px;left:-5px;bottom:-5px;right:-5px;
            z-index:1;
            background-color:rgba(255,255,255,0.5);
        }
        &:after{
            font-size:30px;
            width:30px;
            line-height:30px;
            left:50%;
            top:50%;
            margin:-15px 0 0 -15px;
            font-family:wagtail;
            animation: spin 0.5s infinite linear;
            -webkit-animation: spin 0.5s infinite linear;
            -moz-animation: spin 0.5s infinite linear;
            content:"1";
            z-index:2;
            color:$color-teal;
        }
    }
}


/* general image style */
img{
    max-width:100%;
    height:auto;
    border: 3px solid $color-grey-4;

}

/* make a block-level element inline */
.inline{
    display:inline;
}

.inline-block{
    display:inline-block;
}

.block{
    display:block;
}

.unlist{
    @include unlist();
}

/* utility class to allow things to be scrollable if their contents can't wrap more nicely */
.overflow{
    overflow:auto;
}

.status-msg{
    &.success{
        color:$color-green;
    }
    &.failure{
        color:$color-red;
    }
}
