.status {
  padding: 8px 10px;
  padding-left: 68px;
  position: relative;
  min-height: 54px;
  border-bottom: 1px solid lighten($ui-base-color, 8%);
  cursor: default;

  @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
    // Add margin to avoid Edge auto-hiding scrollbar appearing over content.
    // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
    padding-right: 26px; // 10px + 16px
  }

  @keyframes fade {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  opacity: 1;
  animation: fade 150ms linear;

  .video-player {
    margin-top: 8px;
  }

  &.status-direct:not(.read) {
    background: lighten($ui-base-color, 8%);
    border-bottom-color: lighten($ui-base-color, 12%);
  }

  &.light {
    .status__relative-time {
      color: $light-text-color;
    }

    .status__display-name {
      color: $inverted-text-color;
    }

    .display-name {
      strong {
        color: $inverted-text-color;
      }

      span {
        color: $light-text-color;
      }
    }

    .status__content {
      color: $inverted-text-color;

      a {
        color: $highlight-text-color;
      }

      a.status__content__spoiler-link {
        color: $primary-text-color;
        background: $ui-primary-color;

        &:hover {
          background: lighten($ui-primary-color, 8%);
        }
      }
    }
  }

  &__meta {
    font-size: 14px;
    color: $gab-secondary-text;

    a {
      color: $gab-brand-default;
      font-weight: bold;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

@media screen and (min-width:630px) {
  .status {
    padding: 15px 15px 15px 78px;
    min-height: 50px;

    &__avatar {
      left: 15px;
      top: 17px;
    }

    &__content {
      padding-top: 5px;
    }

    &__prepend {
      margin-left: 78px;
      padding-top: 15px;
    }

    &__prepend-icon-wrapper {
      left: -32px;
    }

    .media-gallery,
    .video-player {
      margin-top: 10px;
    }
  }
}