/*
Profile photo

Shows the user's profile photo. Will fall back to initials for user's that haven't uploaded an image.

Markup:
<h1>Examples when a photo hasn't been uploaded</h1>
<p>Small</p>
<div class="profile-photo profile-photo--empty">
    <div class="profile-photo__text">BD</div>
</div>
<p>Medium</p>
<div class="profile-photo profile-photo--medium profile-photo--empty">
    <div class="profile-photo__text profile-photo__text--medium">BD</div>
</div>
<p>Large</p>
<div class="profile-photo profile-photo--large profile-photo--empty">
    <div class="profile-photo__text profile-photo__text--large">BD</div>
</div>
<h1>Examples for Buildium admins who don't have a profile photo</h1>
<p>Small</p>
<div class="svgicon svgicon--blank-profile-photo svgicon--40"></div>
<p>Medium</p>
<div class="svgicon svgicon--blank-profile-photo svgicon--50"></div>
<p>Large</p>
<div class="svgicon svgicon--blank-profile-photo svgicon--100"></div>

Name: profilePhoto

Styleguide 2.24
*/
@profile-photo-size-small: 40px;
@profile-photo-size-medium: 50px;
@profile-photo-size-large: 100px;
@profile-photo-size-extra-large: 250px;

@profile-photo-text-small: 16px;
@profile-photo-text-medium: 16px;
@profile-photo-text-large: 32px;

.profile-photo__main-container {
    float: left;
}

.profile-photo__summary-container {
    float: left;
    margin-top: -20px;
    margin-right: 30px;
}

.profile-photo {
    width: @profile-photo-size-small;
    height: @profile-photo-size-small;
    border-radius: 50%;
    box-sizing: border-box;
    text-align: center;
    &:hover {
        text-decoration: none;
    }
}

.profile-photo--clickable {
    &:hover {
        cursor: pointer;
    }
}

.profile-photo--empty {
    border: 2px solid @theme-orange1;
}

.profile-photo--medium {
    width: @profile-photo-size-medium;
    height: @profile-photo-size-medium;
    border-width: 2px;
}

.profile-photo--large {
    width: @profile-photo-size-large;
    height: @profile-photo-size-large;
    border-width: 4px;
}

.profile-photo--extra-large {
    width: @profile-photo-size-extra-large;
    height: @profile-photo-size-extra-large;
}

.profile-photo__text {
    font-size: @profile-photo-text-small;
    line-height: 36px;
    font-weight: @font-weight-semibold;
    color: @theme-orange1;
    text-transform: uppercase;
}

.profile-photo__text--medium {
    font-size: @profile-photo-text-medium;
    line-height: 46px;
}

.profile-photo__text--large {
    font-size: @profile-photo-text-large;
    line-height: 94px;
}

.profile-photo__help-text {
    font-size: @font-size--11;
    font-style: italic;
    color: @theme-grey12;

}


//Custom css for Croppie slider
.cr-slider-wrap {
    position: relative;

    input[type=range] {
        -webkit-appearance: none;
    }
    input[type=range]:focus {
        outline: none;
    }
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 5px;
        cursor: pointer;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
        background: @theme-grey10;
        border-radius: 0;
        border: 0 solid rgba(0, 0, 0, 0);
    }
    input[type=range]::-webkit-slider-thumb {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
        border: 0 solid rgba(0, 0, 0, 0);
        height: 15px;
        width: 15px;
        border-radius: 8px;
        background: @theme-green1;
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -5px;
    }
    input[type=range]:focus::-webkit-slider-runnable-track {
        background: #e7e7e7;
    }
    input[type=range]::-moz-range-track {
        width: 100%;
        height: 5px;
        cursor: pointer;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
        background: @theme-grey10;
        border-radius: 0;
        border: 0 solid rgba(0, 0, 0, 0);
    }
    input[type=range]::-moz-range-thumb {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
        border: 0 solid rgba(0, 0, 0, 0);
        height: 15px;
        width: 15px;
        border-radius: 8px;
        background: @theme-green1;
        cursor: pointer;
    }
    input[type=range]::-ms-track {
        width: 100%;
        height: 5px;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        color: transparent;
    }
    input[type=range]::-ms-fill-lower {
        background: @theme-grey10;
        border: 0 solid rgba(0, 0, 0, 0);
        border-radius: 0;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
    }
    input[type=range]::-ms-fill-upper {
        background: @theme-grey10;
        border: 0 solid rgba(0, 0, 0, 0);
        border-radius: 0;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
    }
    input[type=range]::-ms-thumb {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
        border: 0 solid rgba(0, 0, 0, 0);
        height: 15px;
        width: 15px;
        border-radius: 8px;
        background: @theme-green1;
        cursor: pointer;
    }
    input[type=range]:focus::-ms-fill-lower {
        background: @theme-grey10;
    }
    input[type=range]:focus::-ms-fill-upper {
        background: @theme-grey10;
    }
    input[type=range]::-ms-tooltip {
        display: none;
    }

    &:before {
        content: ' ';
        background: url("@{icons}cropping-small-grey.svg") no-repeat;
        display: inline-block;
        width: 18px;
        height: 17px;
        position: absolute;
        left: 10px;
        top: 5px;
    }

    &:after {
        content: ' ';
        background: url("@{icons}cropping-large-grey.svg") no-repeat;
        display: inline-block;
        width: 24px;
        height: 20px;
        position: absolute;
        top: 2px;
        right: 5px;
    }
}