// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

@use '../mixins';
@use '../variables';

.StoryLinkPreview {
  align-items: center;
  background-color: variables.$color-white;
  border-radius: 36px;
  color: variables.$color-gray-90;
  display: inline-flex;
  max-width: 560px;
  min-width: 560px;
  // no taller than 2:3
  max-height: calc(560px / (2 / 3));
  overflow: hidden;

  &__content {
    margin-inline: 24px;
    padding-block: 16px;
    padding-inline: 0;
  }

  &__title {
    @include mixins.font-body-1-bold;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    overflow: hidden;
    font-size: 28px;
    line-height: 40px;
    letter-spacing: -0.16px;
  }

  &__description {
    @include mixins.font-body-2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.06px;
  }

  &__location {
    @include mixins.font-caption;
    color: variables.$color-gray-45;
    font-size: 22px;
    line-height: 28px;
    letter-spacing: 0.12px;
  }

  &__no-image {
    align-items: center;
    display: flex;
    height: 176px;
    justify-content: center;
    margin-inline: 52px;

    &::before {
      @include mixins.color-svg(
        '../images/icons/v3/link/link.svg',
        variables.$color-gray-90
      );
      & {
        content: '';
        display: block;
        height: 48px;
        width: 48px;
      }
    }
  }

  &__icon-container {
    overflow: hidden;
  }

  &--tall {
    flex-direction: column;
  }

  &--tiny {
    min-width: inherit;

    .StoryLinkPreview__no-image {
      height: 100px;
      margin-inline: 24px 0;
      width: auto;
    }
  }
}
