.app-body {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.invisible {
  font-size: 0 !important;
  line-height: 0 !important;
  display: inline-block;
  position: absolute;

  @include size(0);

  img,
  svg {
    margin: 0 !important;
    border: 0 !important;
    padding: 0 !important;

    @include size(0 !important);
  }
}

.ellipsis::after {
  content: "…";
}

.focusable {
  &:focus {
    outline: 0;
    background: lighten($ui-base-color, 4%);

    .status.status-direct {
      background: lighten($ui-base-color, 12%);

      &.muted {
        background: transparent;
      }
    }

    .detailed-status,
    .detailed-status-action-bar {
      background: lighten($ui-base-color, 8%);
    }
  }
}

.status__display-name,
.status__relative-time {
  text-decoration: none;
}

.muted {
  .emojione {
    opacity: 0.5;
  }
}

.status__display-name {
  &:hover strong {
    text-decoration: underline;
  }
}

.muted {
  .status__content p,
  .status__content a {
    color: $dark-text-color;
  }

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

  .status__avatar {
    opacity: 0.5;
  }

  a.status__content__spoiler-link {
    background: $ui-base-lighter-color;
    color: $inverted-text-color;

    &:hover {
      background: lighten($ui-base-lighter-color, 7%);
      text-decoration: none;
    }
  }
}

.status__relative-time {
  &:hover {
    text-decoration: underline;
  }
}

.emoji-mart-emoji {
  span {
    background-repeat: no-repeat;
  }
}

.dropdown--active .emoji-button img {
  opacity: 1;
  filter: none;
}

.loading-bar {
  background-color: $highlight-text-color;
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
}

.detailed,
.fullscreen {

  .video-player__volume__current,
  .video-player__volume::before {
    bottom: 27px;
  }

  .video-player__volume__handle {
    bottom: 23px;
  }
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
}

noscript {
  text-align: center;

  img {
    width: 200px;
    opacity: 0.5;
    animation: flicker 4s infinite;
  }

  div {
    font-size: 14px;
    margin: 30px auto;
    color: $secondary-text-color;
    max-width: 400px;

    a {
      color: $highlight-text-color;
      text-decoration: underline;

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

@keyframes flicker {
  0% {
    opacity: 1;
  }

  30% {
    opacity: 0.75;
  }

  100% {
    opacity: 1;
  }
}