$default-font-size: 14px;
$default-line-height: 130%;
$default-header-font-family:
  ui-sans-serif,
  -apple-system,
  blinkmacsystemfont,
  'Segoe UI',
  'Lato',
  roboto,
  helvetica,
  'Apple Color Emoji',
  arial,
  sans-serif,
  'Segoe UI Emoji',
  'Segoe UI Symbol';
$default-font-family:
  ui-sans-serif,
  -apple-system,
  blinkmacsystemfont,
  'Segoe UI',
  roboto,
  helvetica,
  'Apple Color Emoji',
  arial,
  sans-serif,
  'Segoe UI Emoji',
  'Segoe UI Symbol';
$card-header-font: 500 17px $default-header-font-family;
$card-info-font: 400 12px $default-font-family;
$color-gray-222: #323232;
$app-bg-color-l1: #fff;

:host {
  .link-card {
    position: relative;

    display: flex;
    flex-direction: column;

    max-width: 725px;
    margin-bottom: 10px;
    padding: 5px 35px;

    font-size: $default-font-size;
    line-height: $default-line-height;

    background: $app-bg-color-l1;
    border: 1px solid lightgray;
    border-radius: 4px;
    box-shadow: 0 0 4px 3px #fbfbfb;

    &__wrap {
      color: $color-gray-222;
      text-decoration: none;
    }

    &__icon {
      position: absolute;
      top: 5px;
      left: 5px;
    }

    &__header {
      display: flex;
      padding-top: 15px;

      .header__avatars {
        margin-right: 10px;
      }

      .header__info,
      .header__status {
        font: $card-info-font;
        color: #888;
      }

      .header__status {
        margin-left: auto;
      }
    }

    &__text,
    &__name {
      margin-bottom: 15px;
    }

    &__name {
      margin-top: 15px;
      font: $card-header-font;
    }

    &__text {
      position: relative;

      overflow: hidden;

      max-height: 65px;
      padding: 1px;

      font-family: $default-font-family;
    }
  }
}