.status {
  position: relative;
  min-height: 54px;
  cursor: default;
  margin-bottom: 10px;
  border: 1px solid #171717;

  @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: 12px 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;
    }
  }
}

.status__wrapper--filtered {
  color: $dark-text-color;
  border: 0;
  margin: 0;
  padding: 15px;
  box-sizing: border-box;
  width: 100%;
  clear: both;
  border-bottom: 1px solid lighten($ui-base-color, 8%);

  @include text-sizing(inherit, 400, inherit, center);
}

.status__prepend-icon-wrapper {
  left: -26px;
  position: absolute;
}

.status__relative-time {
  color: $dark-text-color;
  font-size: 12px;
}

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

.status__info {
  display: flex;
  flex-direction: column;
  z-index: 4;
  position: relative;
  padding: 10px 10px 8px 62px;

  &__dot-seperator {
    font-size: 15px;
    color: $dark-text-color;

    @include horizontal-margin(5px);
  }

  &__attributes {
    display: flex;
    margin-top: 2px;
    align-items: center;

    &__item {
      font-size: 12px;
      color: $dark-text-color;

      &--link {
        cursor: pointer;
        color: $primary-text-color;

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

  &__actions {
    display: flex;

    &__icon {
      margin-left: auto;
      color: $dark-text-color;
    }
  }
}


.status__prepend {
  margin-left: 68px;
  color: $dark-text-color;
  padding: 8px 0;
  padding-bottom: 2px;
  font-size: 14px;
  position: relative;

  .status__display-name strong {
    color: $dark-text-color;
  }

  >span {
    display: block;

    @include text-overflow
  }
}

.status__display-name {
  strong {
    color: $primary-text-color;
  }
}

.status__avatar {
  overflow: hidden;
  @include circle(42px);
  @include abs-position(10px, auto, auto, 10px);
}

.media-spoiler-video {
  cursor: pointer;
  margin-top: 8px;
  position: relative;
  border: 0;
  display: block;

  @include background-image("");
}

.media-spoiler-video-play-icon {
  border-radius: 100px;
  color: rgba($primary-text-color, 0.8);
  font-size: 36px;
  padding: 5px;
  transform: translate(-50%, -50%);

  @include abs-position(50%, auto, auto, 50%);
}


.media-spoiler {
  background: $base-overlay-background;
  color: $darker-text-color;
  border: 0;
  padding: 0;
  border-radius: 4px;
  appearance: none;

  @include size(100%);

  &:hover,
  &:active,
  &:focus {
    padding: 0;
    color: lighten($darker-text-color, 8%);
  }
}