.status-card {
  display: flex;
  font-size: 14px;
  color: $dark-text-color;
  margin-top: 14px;
  text-decoration: none;
  overflow: hidden;

  @include border-design(lighten($ui-base-color, 8%), 1px, 4px);

  &__actions {
    @include flex(center, center);
    @include abs-position(0, 0, 0, 0);

    &>div {
      background: rgba($base-shadow-color, 0.6);
      border-radius: 8px;
      padding: 12px 9px;
      flex: 0 0 auto;

      @include flex(center, center);
    }

    button,
    a {
      display: inline;
      color: $secondary-text-color;
      background: transparent;
      border: 0;
      padding: 0 8px;
      text-decoration: none;
      font-size: 18px;
      line-height: 18px;

      &:hover,
      &:active,
      &:focus {
        color: $primary-text-color;
      }
    }

    a {
      font-size: 19px;
      position: relative;
      bottom: -1px;
    }
  }

  &__title {
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
    color: $darker-text-color;
    text-decoration: none;

    @include text-overflow(nowrap);
  }

  &__content {
    flex: 1 1 auto;
    overflow: hidden;
    padding: 14px 14px 14px 8px;
  }

  &__description {
    color: $darker-text-color;
  }

  &__host {
    display: block;
    margin-top: 5px;
    font-size: 13px;

    @include text-overflow(nowrap);
  }

  &__image {
    flex: 0 0 100px;
    background: lighten($ui-base-color, 8%);
    position: relative;

    &>.fa {
      font-size: 21px;
      position: absolute;
      transform-origin: 50% 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  &__image-image {
    border-radius: 4px 0 0 4px;
    display: block;
    margin: 0;
    object-fit: cover;
    background-size: cover;
    background-position: center center;

    @include size(100%);
  }

  &.horizontal {
    display: block;
  }

  &.horizontal & {
    &__image {
      width: 100%;
    }

    &__image-image {
      border-radius: 4px 4px 0 0;
    }

    &__title {
      white-space: inherit;
    }
  }

  &.compact {
    border-color: lighten($ui-base-color, 4%);

    &.interactive {
      border: 0;
    }
  }

  &.compact & {
    &__content {
      padding: 10px 8px 8px 8px;
    }

    &__title {
      white-space: nowrap;
    }

    &__image {
      flex: 0 0 60px;
    }
  }
}

a.status-card {
  cursor: pointer;

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

  &.compact:hover {
    background-color: lighten($ui-base-color, 4%);
  }
}

.status-card-photo {
  cursor: zoom-in;
  display: block;
  text-decoration: none;
  margin: 0;

  @include size(100%, auto);
}

.status-card-video {
  iframe {
    @include size(100%);
  }
}