@import 'settings';

// SocialBlue Sky.
.socialblue--sky {
  .badge-status {
    @include for-tablet-landscape-up {
      margin-left: .5rem;
      padding: 5px .875rem;
      font-size: .875rem;
      font-weight: 400;
    }
  }

  .teaser__content-line {
    margin-bottom: 5px;
  }

  .teaser__content {
    padding-bottom: 0;
  }

  .teaser__title {
    margin-bottom: .75rem;
  }

  .teaser__tag {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-right: .5rem;
    margin-bottom: .5rem;
    word-break: break-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #555;

    [dir='rtl'] & {
      margin-right: 0;
      margin-left: .5rem;
    }

    a {
      font-weight: 700;
      transition: .3s ease-out;
    }

    @include for-tablet-landscape-down {
      font-size: .75rem;
    }
  }

  .teaser--tile {

    .teaser__title {
      min-height: auto;
      max-height: none;
      margin-bottom: .5rem;
    }

    .teaser__content {
      flex: none;
      padding-bottom: 10px;
    }
  }

  .teaser__not-icon {
    svg {
      display: none;
    }
  }

  .teaser__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    .teaser__badge {
      display: flex;
      justify-content: flex-end;
      margin: 0 0 .5rem 3px;
    }

    .teaser__tag {
      flex: 1;
    }
  }

  // Profile tile teasers.
  .teaser-profile {
    .teaser__image {
      img {
        border-radius: 50%;
      }
    }

    .teaser__tag {
      margin-right: 0;
      margin-bottom: 4px;
    }
  }
}
