$border: var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #dfe5eb));
$text-primary: var(
  --wds-color-text-standard-primary,
  var(--wsr-color-D10, #000624)
);
$text-secondary: var(
  --wds-color-text-standard-secondary,
  var(--wsr-color-D20, #333853)
);

.social-preview {
  width: 100%;
  border: solid 1px $border;
  background-color: var(
    --wds-color-fill-surface-neutral,
    var(--wsr-color-D70, #eceff3)
  );
  height: 100%;
  box-sizing: border-box;

  &--skin-twitter {
    border-radius: 12px;
    background-color: var(
      --wds-color-fill-surface-raised,
      var(--wsr-color-D80, #ffffff)
    );
  }

  &--skin-twitter#{&}--size-small {
    display: flex;
    flex-direction: row;
  }

  &--skin-twitter#{&}--size-small &__media-container {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    flex-grow: 0;
  }

  & &__container {
    padding: 9px 12px 9px 12px;
    border-top: solid 1px $border;
  }

  &--skin-twitter#{&}--size-small &__container {
    border-top: none;
    border-left: solid 1px $border;
    /* needed to support text with ellipsis inside a container in flex.
       see https://css-tricks.com/flexbox-truncated-text/ */
    min-width: 0;
  }

  &--mobile#{&}--skin-twitter#{&}--size-small {
    flex-direction: column;
  }

  &--mobile#{&}--skin-twitter#{&}--size-small &__media-container {
    width: 100%;
    height: auto;
  }

  &--mobile#{&}--skin-twitter#{&}--size-small &__container {
    border-left: none;
    border-top: solid 1px $border;
  }

  &--skin-twitter &__url-container {
    display: flex;
    direction: horizontal;
  }

  /* the root is doubled on every text slot below to reach (0,3,0); Text's own
     `skin-standard` colour rule is (0,2,0) and takes over the colour if the
     doubling is dropped */
  &#{&} &__url {
    color: var(
      --wds-color-text-standard-secondary-light,
      var(--wsr-color-D40, #868aa5)
    );
    display: block;
  }

  &#{&}--skin-twitter &__url {
    color: $text-secondary;
  }

  &#{&} &__title {
    color: $text-primary;
  }

  &#{&}--skin-twitter &__title {
    color: $text-primary;
    margin-bottom: 3px;
  }

  &#{&} &__description {
    color: $text-secondary;
  }

  &#{&}--skin-twitter &__description {
    color: $text-secondary;
    margin-bottom: 3px;
  }
}