@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.feed-card {
  width: 100%;
  padding: var(--spacing-m) var(--spacing-xl) var(--spacing-xl);
  background: var(--color-light);
  box-shadow: var(--shadow-default);
  font-size: var(--font-size-h5);

  &-wrapper {
    width: 33.33333%;
    padding: 15px;

    @include tablet {
      width: 50%;
    }

    @include mobile {
      width: 100%;
    }
  }

  &-parent {
    width: 100%;
  }

  a.video,
  a.photo {
    margin-top: var(--spacing-m);
    display: block;
  }

  a.video {
    position: relative;
    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    &::before {
      width: 40px;
      height: 40px;
      background: var(--color-light);
      border-radius: 100%;
    }

    &::after {
      width: 0;
      height: 0;
      border-top: 12px solid transparent;
      border-bottom: 13px solid transparent;
      border-left: 13px solid black;
      transform: translate(-5px, -50%);
    }
  }

  &__footer {
    margin-top: var(--spacing-m);
    display: flex;

    &__img {
      width: 55px;
      height: 55px;
      border-radius: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      flex-shrink: 0;
    }

    &__name {
      flex: auto;
      padding: var(--spacing-xs) var(--spacing-m);
      place-self: flex-end;

      @include fontSize(15);

      strong {
        font-weight: 600;
      }

      div {
        color: var(--color-grey-500);
        margin-top: var(--spacing-xs);
      }
    }

    &__time {
      color: var(--color-grey-500);
      place-self: flex-end;
      padding-bottom: var(--spacing-xs);
      text-align: center;

      @include custom-break(1200px) {
        position: absolute;
        right: 55px;
        bottom: 25px;
      }
    }
  }
}
