//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@use "../../config" as *;
@use "../../spacing" as *;
@use "../../motion" as *;
@use "../../type" as *;
@use "../../breakpoint" as *;
@use "../../theme" as *;
@use "../../utilities/component-reset";
@use "../../utilities/convert" as *;
@use "../../utilities/rtl" as *;
@use "../../utilities/high-contrast-mode" as *;

/// User styles
/// @access public
/// @group user
@mixin user {
  .#{$prefix}--user {
    display: flex;
    align-items: center;
  }

  .#{$prefix}--avatar {
    font-size: 1.2em;
    background: $layer-primary;

    /* > img {
      display: block;
      object-fit: cover;
      width: 1.2em;
      height: 1.2em;
    } */

    .#{$prefix}--user--has-description & {
      //width: calcRem(60px);
      //height: calcRem(60px);
      margin-right: $spacing-06;
      @include rtl {
        margin-left: $spacing-06;
        margin-right: inherit;
      }
    }
  }

  .#{$prefix}--user__description {
    @include type-style("productive-heading-03");
    font-size: calcRem(18px);
    //color: var(--text-02);
  }

  .#{$prefix}--user__extended-description {
    margin-left: $spacing-06;
    @include type-style("productive-heading-03");
    font-size: calcRem(18px);
    //color: var(--text-02);
  }

  .#{$prefix}--avatar + .#{$prefix}--user__title {
    margin-left: var(--spacing-100);
    @include rtl {
      margin-right: var(--spacing-100);
      margin-left: inherit;
    }
  }

  .#{$prefix}--user__title {
    > span {
      .#{$prefix}--user--has-description & {
        font-weight: bold;
        line-height: 1.4em;
      }
    }
  }

  .#{$prefix}--user__title--ellipsis {
    display: inline-block;
    // @include breakpoint-between(bp--sm--major, bp--md--major) {
    //   max-width: 130px;
    //   border: 1px solid red;
    // }

    overflow: hidden;
    line-height: 1.5;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .#{$prefix}--user__title--small {
    @include breakpoint("lg") {
      display: none;
    }
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .#{$prefix}--user__title--ellipsis {
    max-width: 70px;
  }
}