// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Persona styles


//= Colors used in the initials color block
$ms-color-initials-lightBlue:   #6ba5e7;
$ms-color-initials-blue:        #2d89ef;
$ms-color-initials-darkBlue:    #2b5797;
$ms-color-initials-teal:        #00aba9;
$ms-color-initials-lightGreen:  #99b433;
$ms-color-initials-green:       #00a300;
$ms-color-initials-darkGreen:   #1e7145;
$ms-color-initials-lightPink:   #e773bd;
$ms-color-initials-pink:        #ff0097;
$ms-color-initials-magenta:     #7e3878;
$ms-color-initials-purple:      #603cba;
$ms-color-initials-black:       #1d1d1d;
$ms-color-initials-orange:      #da532c;
$ms-color-initials-red:         #ee1111;
$ms-color-initials-darkRed:     #b91d47;


.ms-Persona {
  @include ms-font-m;
  @include ms-u-normalize;
  display: table;
  line-height: 1;
  position: relative;
}

.ms-Persona-imageArea {
  position: relative;
  display: block;
  overflow: hidden;
  text-align: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  z-index: $ms-zIndex-back;

  @media screen and (-ms-high-contrast: active) {
    border: 1px solid $ms-color-white;
  }

  @media screen and (-ms-high-contrast: black-on-white) {
    border: 1px solid $ms-color-black;
  }
}

//= Note: The doughboy placeholder is being deprecated.
// The initials color block (.ms-Persona-initials) will be used going forward
// as a fallback when the persona does not have an image.
.ms-Persona-placeholder {
  color: $ms-color-white;
  position: absolute;
  right: 0;
  left: 0;
  font-size: 47px;
  top: 9px;
}

.ms-Persona-initials {
  color: $ms-color-white;
  font-size: $ms-font-size-l;
  font-family: $ms-font-family-light;
  line-height: 48px;

  &.ms-Persona-initials--lightBlue {
    background-color: $ms-color-initials-lightBlue;
  }
  &.ms-Persona-initials--blue {
    background-color: $ms-color-initials-blue;
  }
  &.ms-Persona-initials--darkBlue {
    background-color: $ms-color-initials-darkBlue;
  }
  &.ms-Persona-initials--teal {
    background-color: $ms-color-initials-teal;
  }
  &.ms-Persona-initials--lightGreen {
    background-color: $ms-color-initials-lightGreen;
  }
  &.ms-Persona-initials--green {
    background-color: $ms-color-initials-green;
  }
  &.ms-Persona-initials--darkGreen {
    background-color: $ms-color-initials-darkGreen;
  }
  &.ms-Persona-initials--lightPink {
    background-color: $ms-color-initials-lightPink;
  }
  &.ms-Persona-initials--pink {
    background-color: $ms-color-initials-pink;
  }
  &.ms-Persona-initials--magenta {
    background-color: $ms-color-initials-magenta;
  }
  &.ms-Persona-initials--purple {
    background-color: $ms-color-initials-purple;
  }
  &.ms-Persona-initials--black {
    background-color: $ms-color-initials-black;
  }
  &.ms-Persona-initials--orange {
    background-color: $ms-color-initials-orange;
  }
  &.ms-Persona-initials--red {
    background-color: $ms-color-initials-red;
  }
  &.ms-Persona-initials--darkRed {
    background-color: $ms-color-initials-darkRed;
  }
}

.ms-Persona-image {
  display: table-cell;
  margin-right: 10px;
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
}

.ms-Persona-image[src=""] {
   display: none;
}

.ms-Persona-presence {
  background-color: $ms-color-presence-available;
  position: absolute;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  top: auto;
  left: 34px;
  bottom: -1px;
  border: 2px solid $ms-color-white;
}

.ms-Persona-details {
  display: table-cell;
  padding: 0 12px;
  vertical-align: middle;
  overflow: hidden;
}

.ms-Persona-primaryText,
.ms-Persona-secondaryText,
.ms-Persona-tertiaryText,
.ms-Persona-optionalText {
  @include noWrap();
  width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-Persona-primaryText {
  color: $ms-color-neutralPrimary;
  font-family: $ms-font-family-regular;
  font-size: $ms-font-size-l;
  margin-top: -3px;
  line-height: 1.4;
}

.ms-Persona-secondaryText,
.ms-Persona-tertiaryText,
.ms-Persona-optionalText {
  color: $ms-color-neutralSecondary;
  font-family: $ms-font-family-regular;
  font-size: $ms-font-size-s;
  white-space: nowrap;
  line-height: 1.3;
}

.ms-Persona-secondaryText {
  padding-top: 3px;
}

.ms-Persona-tertiaryText,
.ms-Persona-optionalText {
  padding-top: 5px;
  display: none; // Hidden on default persona
}


//== Modifier: Persona with square images
//
.ms-Persona.ms-Persona--square {
  .ms-Persona-imageArea {
    background-color: $ms-color-neutralTertiary;
    border-radius: 0;
  }

  .ms-Persona-presence {
    top: 0;
    left: 0;
    bottom: auto;
    right: auto;
    height: 48px;
    width: 5px;
    border-radius: 0;
    border: 0;

    @media screen and (-ms-high-contrast: active) {
      border: 1px solid $ms-color-white;
    }

    @media screen and (-ms-high-contrast: black-on-white) {
      border: 1px solid $ms-color-black;
    }
  }
}


//== Modifier: Tiny Persona
//
.ms-Persona.ms-Persona--tiny {
  height: 30px;
  display: inline-block;

  .ms-Persona-imageArea {
    overflow: visible;
    background: transparent;
    height: 0;
    width: 0;
  }

  .ms-Persona-presence {
    right: auto;
    top: 10px;
    left: 0;
    border: 0;

    @media screen and (-ms-high-contrast: active) {
      top: 9px;
      border: 1px solid $ms-color-white;
    }

    @media screen and (-ms-high-contrast: black-on-white) {
      border: 1px solid $ms-color-black;
    }
  }

  .ms-Persona-details {
    padding-left: 20px;
  }

  .ms-Persona-primaryText {
    font-size: $ms-font-size-m;
    padding-top: 9px;
  }

  .ms-Persona-secondaryText {
    display: none;
  }
}


//== Modifier: Tiny Persona with read only state
//
// This variant includes a semicolon, and is
// most often presented within a People Picker.
.ms-Persona.ms-Persona--tiny.ms-Persona--readonly {
  padding: 0;
  background-color: transparent;

  .ms-Persona-primaryText:after {
    content: ';';
  }
}


//== Modifier: Tiny Square Persona
//
.ms-Persona.ms-Persona--square.ms-Persona--tiny {
  .ms-Persona-presence {
    height: 12px;
    width: 12px;
    top: 10px;
  }
}


//== Modifier: Extra Small Persona
//
.ms-Persona.ms-Persona--xs {
  .ms-Persona-imageArea,
  .ms-Persona-image {
    width: 32px;
    height: 32px;
  }

  .ms-Persona-placeholder {
    font-size: 28px;
    top: 6px;
  }

  .ms-Persona-initials {
    font-size: $ms-font-size-s;
    line-height: 32px;
  }

  .ms-Persona-presence {
    left: 19px;
  }

  .ms-Persona-details {
    padding-left: 8px;
  }

  .ms-Persona-primaryText {
    font-size: $ms-font-size-m;
    padding-top: 3px;
  }

  .ms-Persona-secondaryText {
    display: none;
  }
}


//== Modifier: Extra Small Square Persona
//
.ms-Persona.ms-Persona--square.ms-Persona--xs {
  .ms-Persona-presence {
    height: 32px;
    width: 4px;
    left: 0;
  }
}


//== Modifier: Small Persona
//
.ms-Persona.ms-Persona--sm {
  .ms-Persona-imageArea,
  .ms-Persona-image {
    width: 40px;
    height: 40px;
  }

  .ms-Persona-placeholder {
    font-size: 38px;
    top: 5px;
  }

  .ms-Persona-initials {
    font-size: $ms-font-size-m;
    line-height: 40px;
  }

  .ms-Persona-presence {
    left: 27px;
  }

  .ms-Persona-details {
    padding-left: 8px;
  }

  .ms-Persona-primaryText {
    font-size: $ms-font-size-m;
  }

  .ms-Persona-primaryText,
  .ms-Persona-secondaryText {
    padding-top: 1px;
  }
}


//== Modifier: Small Square Persona
//
.ms-Persona.ms-Persona--square.ms-Persona--sm {
  .ms-Persona-presence {
    height: 40px;
    width: 4px;
    left: 0;
  }
}


//== Modifier: Large Persona
//
.ms-Persona.ms-Persona--lg {
  .ms-Persona-imageArea,
  .ms-Persona-image {
    width: 72px;
    height: 72px;
  }

  .ms-Persona-placeholder {
    font-size: 67px;
    top: 10px;
  }

  .ms-Persona-initials {
    font-size: $ms-font-size-xxl;
    line-height: 72px;
  }

  .ms-Persona-presence {
    left: 49px;
  }

  .ms-Persona-secondaryText {
    padding-top: 3px;
  }

  .ms-Persona-tertiaryText {
    padding-top: 5px;
  }

  .ms-Persona-tertiaryText {
    display: block; // Show tertiary text
  }
}


//== Modifier: Large Square Persona
//
.ms-Persona.ms-Persona--square.ms-Persona--lg {
  .ms-Persona-presence {
    height: 72px;
    width: 7px;
    left: 0;
  }
}


//== Modifier: Extra Large Persona
//
.ms-Persona.ms-Persona--xl {
  .ms-Persona-imageArea,
  .ms-Persona-image {
    width: 100px;
    height: 100px;
  }

  .ms-Persona-placeholder {
    font-size: 95px;
    top: 12px;
  }

  .ms-Persona-initials {
    font-size: $ms-font-size-su;
    line-height: 100px;
  }

  .ms-Persona-presence {
    height: 20px;
    width: 20px;
    left: 71px;
  }

  .ms-Persona-details {
    padding-left: 20px;
  }

  .ms-Persona-primaryText {
    font-size: $ms-font-size-xl;
    font-family: $ms-font-family-semilight;
    margin-top: 0;
  }

  .ms-Persona-secondaryText {
    padding-top: 2px;
  }

  .ms-Persona-tertiaryText,
  .ms-Persona-optionalText {
    padding-top: 5px;
    display: block; // Show tertiary and optional text
  }
}


//== Modifier: Extra Large Square Persona
//
.ms-Persona.ms-Persona--square.ms-Persona--xl {
  .ms-Persona-presence {
    height: 100px;
    width: 9px;
    left: 0;
  }
}


//== Modifier: Persona with darker text
//
// Note: Typically applied when the component has a colored background.
.ms-Persona.ms-Persona--darkText {
  .ms-Persona-primaryText {
    color: $ms-color-neutralDark;
  }

  .ms-Persona-secondaryText,
  .ms-Persona-tertiaryText,
  .ms-Persona-optionalText {
    color: $ms-color-neutralPrimary;
  }
}


//== Modifier: Selectable Persona
//
.ms-Persona.ms-Persona--selectable {
  cursor: pointer;
  padding: 0 10px;

  &:not(.ms-Persona--xl) {
    &:hover,
    &:focus {
      background-color: $ms-color-themeLighter;
      outline: 1px solid transparent;
    }
  }
}


//== Presence indicator variants.

//== Modifier: Persona with available presence
//
.ms-Persona.ms-Persona--available {
  .ms-Persona-presence {
    background-color: $ms-color-presence-available;
  }
}


//== Modifier: Persona with away presence
//
.ms-Persona.ms-Persona--away {
  .ms-Persona-presence {
    background-color: $ms-color-presence-away;
  }
}


//== Modifier: Persona with blocked presence
//
.ms-Persona.ms-Persona--blocked {
  .ms-Persona-presence {
    background-color: $ms-color-presence-blocked-background;
    // Use a gradient to include the stripe on modern browsers.
    background-image: linear-gradient( to bottom, $ms-color-presence-blocked-background 0%, $ms-color-presence-blocked-background 48%, $ms-color-presence-blocked-line 40%, $ms-color-presence-blocked-line 58%, $ms-color-presence-blocked-background 52%, $ms-color-presence-blocked-background 100% );
  }
}


//== Modifier: Persona with busy presence
//
.ms-Persona.ms-Persona--busy {
  .ms-Persona-presence {
    background-color: $ms-color-presence-busy-average;
    // Replace solid background with stripes on modern browsers.
    background: repeating-linear-gradient( -45deg, $ms-color-presence-busy-stripe-light, $ms-color-presence-busy-stripe-light 1px, $ms-color-presence-busy-stripe-dark 0px, $ms-color-presence-busy-stripe-dark 2px );
  }
}


//== Modifier: Square Persona with busy presence
//
.ms-Persona.ms-Persona--busy.ms-Persona--square {
  .ms-Persona-presence {
    background-color: $ms-color-presence-busy-average;
    // Replace solid background with stripes on modern browsers.
    background: repeating-linear-gradient( -45deg, $ms-color-presence-busy-stripe-light, $ms-color-presence-busy-stripe-light 3px, $ms-color-presence-busy-stripe-dark 3px, $ms-color-presence-busy-stripe-dark 6px );
  }
}


//== Modifier: Persona with do not disturb presence
//
.ms-Persona.ms-Persona--dnd {
  .ms-Persona-presence {
    background-color: $ms-color-presence-dnd-background;
    // Use a gradient to include the stripe on modern browsers.
    background-image: linear-gradient( to bottom, $ms-color-presence-dnd-background 0%, $ms-color-presence-dnd-background 48%, $ms-color-presence-dnd-line 48%, $ms-color-presence-dnd-line 52%, $ms-color-presence-dnd-background 52%, $ms-color-presence-dnd-background 100% );
  }
}


//== Modifier: Persona with offline presence
//
.ms-Persona.ms-Persona--offline {
  .ms-Persona-presence {
    background-color: $ms-color-presence-offline;
  }
}