/**
 * Office UI Fabric JS 1.5.0
 * The JavaScript front-end framework for building experiences for Office 365.
 **/
// 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


// Skype presence colors
$ms-color-presence-available:          #7FBA00;
$ms-color-presence-away:               #FCD116;
$ms-color-presence-busy:               #E81123;
$ms-color-presence-dnd-background:     #E81123;
$ms-color-presence-dnd-line:           #FFFFFF;
$ms-color-presence-offline:            #93ABBD;
$ms-color-presence-out-of-office:      $ms-color-magenta;

// Other presence colors
$ms-color-presence-blocked-background: #DEDEDE;
$ms-color-presence-blocked-line:       #C72D25;
$ms-color-presence-busy-stripe-light:  #E57A79;
$ms-color-presence-busy-stripe-dark:   #D00E0D;
$ms-color-presence-busy-average:       #D93B3B;

// Persona Sizes
$ms-Persona-sizeTiny: 30px;
$ms-Persona-sizeXs:   32px;
$ms-Persona-sizeSm:   40px;
$ms-Persona-sizeMd:   48px;
$ms-Persona-sizeLg:   72px;
$ms-Persona-sizeXl:   100px;

// Details Spacing
$ms-Persona-imageDetailsSmSpace: 8px;
$ms-Persona-imageDetailsLgSpace: 12px;
$ms-Persona-imageDetailsXlSpace: 20px;

// Presence Sizes
$ms-Persona-presenceSizeMd: 12px;
$ms-Persona-presenceSizeLg: 20px;
$ms-Persona-presenceSizeXl: 28px;


.ms-Persona {
  @include ms-baseFont;
  @include ms-u-normalize;
  color: $ms-color-neutralPrimary;
  font-size: $ms-font-size-m;
  font-weight: $ms-font-weight-regular;
  line-height: 1;
  position: relative;
  width: 100%;
  height: $ms-Persona-sizeMd;
  display: table;
  table-layout: fixed;
  border-collapse: separate;

  .ms-ContextualHost {
    display: none;
  }
}

.ms-Persona-imageArea {
  position: absolute;
  overflow: hidden;
  text-align: center;
  max-width: $ms-Persona-sizeMd;
  height: $ms-Persona-sizeMd;
  border-radius: 50%;
  z-index: $ms-zIndex-back;
  width: 100%;
  top: 0;
  left: 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;
  }
}

//= 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;
  z-index: $ms-zIndex-middle;
}

.ms-Persona-initials {
  color: $ms-color-white;
  font-size: $ms-font-size-l;
  font-weight: $ms-font-weight-light;
  line-height: $ms-Persona-sizeMd;

  &.ms-Persona-initials--blueLight {
    background-color: $ms-color-blueLight;
  }

  &.ms-Persona-initials--blue {
    background-color: $ms-color-blue;
  }

  &.ms-Persona-initials--blueDark {
    background-color: $ms-color-blueDark;
  }

  &.ms-Persona-initials--teal {
    background-color: $ms-color-teal;
  }

  &.ms-Persona-initials--greenLight {
    background-color: $ms-color-greenLight;
  }

  &.ms-Persona-initials--green {
    background-color: $ms-color-green;
  }

  &.ms-Persona-initials--greenDark {
    background-color: $ms-color-greenDark;
  }

  &.ms-Persona-initials--magentaLight {
    background-color: $ms-color-magentaLight;
  }

  &.ms-Persona-initials--magenta {
    background-color: $ms-color-magenta;
  }

  &.ms-Persona-initials--purpleLight {
    background-color: $ms-color-purpleLight;
  }

  &.ms-Persona-initials--purple {
    background-color: $ms-color-purple;
  }

  &.ms-Persona-initials--black {
    background-color: $ms-color-black;
  }

  &.ms-Persona-initials--orange {
    background-color: $ms-color-orange;
  }

  &.ms-Persona-initials--red {
    background-color: $ms-color-red;
  }

  &.ms-Persona-initials--redDark {
    background-color: $ms-color-redDark;
  }
}

.ms-Persona-image {
  position: absolute;
  top: 0;
  left: 0;
  height: $ms-Persona-sizeMd;
  z-index: $ms-zIndex-front;
  width: 100%;

  &[src=''] {
    display: none;
  }
}

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

  @media screen and (-ms-high-contrast: active) {
    border-color: $ms-color-black;
    box-shadow: 0 0 0 1px $ms-color-contrastBlackSelected inset;
    color: $ms-color-black;
    background-color: $ms-color-white;
  }

  @media screen and (-ms-high-contrast: black-on-white) {
    border-color: $ms-color-white;
    box-shadow: 0 0 0 1px $ms-color-contrastWhiteSelected inset;
    color: $ms-color-white;
    background-color: $ms-color-black;
  }
}

.ms-Persona-presenceIcon {
  color: $ms-color-white;
  font-size: 8px;
  line-height: $ms-Persona-presenceSizeMd;
  vertical-align: top;
}

.ms-Persona-details {
  padding: 0 12px;
  vertical-align: middle;
  overflow: hidden;
  text-align: left;
  padding-left: $ms-Persona-sizeMd + $ms-Persona-imageDetailsLgSpace;
  display: table-cell;
  width: 100%;
}

.ms-Persona-primaryText,
.ms-Persona-secondaryText,
.ms-Persona-tertiaryText,
.ms-Persona-optionalText {
  @include noWrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-Persona-primaryText {
  color: $ms-color-neutralPrimary;
  font-weight: $ms-font-weight-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-weight: $ms-font-weight-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: Tiny Persona
//
.ms-Persona.ms-Persona--tiny {
  height: $ms-Persona-sizeTiny;
  display: inline-block;

  .ms-Persona-imageArea {
    overflow: visible;
    display: none;
  }

  .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: Extra Small Persona, FacePile and Token modifiers
//
.ms-Persona.ms-Persona--xs,
.ms-Persona.ms-Persona--facePile,
.ms-Persona.ms-Persona--token {
  height: $ms-Persona-sizeXs;

  .ms-Persona-imageArea,
  .ms-Persona-image {
    max-width: $ms-Persona-sizeXs;
    height: $ms-Persona-sizeXs;
  }

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

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

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

  .ms-Persona-details {
    padding-left: $ms-Persona-sizeXs + $ms-Persona-imageDetailsSmSpace;
  }

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

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


//== Modifier: Small Persona
//
.ms-Persona.ms-Persona--sm {
  height: $ms-Persona-sizeSm;

  .ms-Persona-imageArea,
  .ms-Persona-image {
    max-width: $ms-Persona-sizeSm;
    height: $ms-Persona-sizeSm;
  }

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

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

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

  .ms-Persona-details {
    padding-left: $ms-Persona-sizeSm + $ms-Persona-imageDetailsSmSpace;
  }

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

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


//== Modifier: Large Persona
//
.ms-Persona.ms-Persona--lg {
  height: $ms-Persona-sizeLg;

  .ms-Persona-imageArea,
  .ms-Persona-image {
    max-width: $ms-Persona-sizeLg;
    height: $ms-Persona-sizeLg;
  }

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

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

  .ms-Persona-presence {
    left: 49px;
    height: $ms-Persona-presenceSizeLg;
    width: $ms-Persona-presenceSizeLg;
    border-width: 3px;
  }

  .ms-Persona-presenceIcon {
    line-height: $ms-Persona-presenceSizeLg;
    font-size: $ms-font-size-m;
  }

  .ms-Persona-details {
    padding-left: $ms-Persona-sizeLg + $ms-Persona-imageDetailsLgSpace;
  }

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

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


//== Modifier: Extra Large Persona
//
.ms-Persona.ms-Persona--xl {
  height: $ms-Persona-sizeXl;

  .ms-Persona-imageArea,
  .ms-Persona-image {
    max-width: $ms-Persona-sizeXl;
    height: $ms-Persona-sizeXl;
  }

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

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

  .ms-Persona-presence {
    height: $ms-Persona-presenceSizeXl;
    width: $ms-Persona-presenceSizeXl;
    left: 71px;
    border-width: 4px;
  }

  .ms-Persona-presenceIcon {
    line-height: $ms-Persona-presenceSizeXl;
    font-size: $ms-font-size-xl;
    position: relative;
    top: 1px;
  }

  .ms-Persona-details {
    padding-left: $ms-Persona-sizeXl + $ms-Persona-imageDetailsXlSpace;
  }

  .ms-Persona-primaryText {
    font-size: $ms-font-size-xl;
    font-weight: $ms-font-weight-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: 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;
  }

  .ms-Persona-presenceIcon {
    position: relative;
    left: 1px;
  }
}


//== Modifier: Persona with blocked presence
//
.ms-Persona.ms-Persona--blocked {
  .ms-Persona-presence {
    background-color: $ms-color-white;

    &::before {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      box-shadow: 0 0 0 2px $ms-color-presence-busy-average inset;
      border-radius: 50%;
    }

    &::after {
      content: '';
      width: 100%;
      height: 2px;
      background-color: $ms-color-presence-busy-average;
      transform: rotate(-45deg);
      position: absolute;
      top: 5px;
      left: 0;
    }
  }

  &.ms-Persona--lg {
    .ms-Persona-presence {
      &::after {
        top: 9px;
      }
    }
  }

  &.ms-Persona--xl {
    .ms-Persona-presence {
      &::after {
        top: 13px;
      }
    }
  }
}


//== Modifier: Persona with busy presence
//
.ms-Persona.ms-Persona--busy {
  .ms-Persona-presence {
    background-color: $ms-color-presence-busy-average;

    @media screen and (-ms-high-contrast: active) {
      background-color: $ms-color-contrastBlackSelected;
    }

    @media screen and (-ms-high-contrast: black-on-white) {
      background-color: $ms-color-contrastWhiteSelected;
    }
  }
}


//== Modifier: Persona with do not disturb presence
//
.ms-Persona.ms-Persona--dnd {
  .ms-Persona-presence {
    background-color: $ms-color-presence-dnd-background;
  }
}


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

    @media screen and (-ms-high-contrast: active) {
      background-color: $ms-color-black;
      box-shadow: 0 0 0 1px $ms-color-white inset;
    }

    @media screen and (-ms-high-contrast: black-on-white) {
      background-color: $ms-color-white;
      box-shadow: 0 0 0 1px $ms-color-black inset;
    }
  }
}

//== Modifier: FacePile
//
.ms-Persona.ms-Persona--facePile {
  display: inline-block;
  width: auto;

  &:hover {
    cursor: pointer;
  }

  .ms-Persona-imageArea {
    position: relative;
    width: 100%;
    min-width: $ms-Persona-sizeXs;
  }

  .ms-Persona-initials {
    position: relative;
  }

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

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

//== Modifier: FacePile
//
.ms-Persona.ms-Persona--token {
  display: inline-flex;
  width: auto;
  background-color: $ms-color-neutralLighter;
  border-radius: 20px;
  margin: 4px;

  &:hover {
    cursor: pointer;
  }

  .ms-Persona-actionIcon {
    border-radius: 20px;
    display: inline-block;
    width: $ms-Persona-sizeXs;
    height: $ms-Persona-sizeXs;
    padding: 0;
    line-height: 30px;
    transition: background-color $ms-duration1 $ms-ease1;
    text-align: center;

    &:hover {
      background-color: $ms-color-neutralLight;
    }
  }

  .ms-Persona-imageArea {
    width: 100%;
    min-width: $ms-Persona-sizeXs;
  }

  .ms-Persona-details {
    height: 30px;
    display: inline-block;
    width: auto;
    padding-right: 8px;
  }

  .ms-Persona-primaryText {
    padding-top: 0;
    line-height: 34px;
  }

  .ms-Persona-initials {
    position: relative;
  }
}