.navigation-bar {
  padding: 10px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: default;
  color: $darker-text-color;

  strong {
    color: $secondary-text-color;
  }

  a {
    color: inherit;
  }

  .permalink {
    text-decoration: none;
  }

  &__actions {
    position: relative;

    .icon-button.close {
      position: absolute;
      pointer-events: none;
      transform: scale(0.0, 1.0) translate(-100%, 0);
      opacity: 0;
    }

    .compose__action-bar .icon-button {
      pointer-events: auto;
      transform: scale(1.0, 1.0) translate(0, 0);
      opacity: 1;
    }
  }

  &__profile {
    flex: 1 1 auto;
    margin-left: 8px;
    line-height: 20px;
    margin-top: -1px;
    overflow: hidden;
  }

  &__profile-account {
    display: block;
    font-weight: 500;

    @include text-overflow(nowrap);
  }

  &__profile-edit {
    color: inherit;
    text-decoration: none;
  }

  @media screen and (max-width: 630px) and (max-height: 400px) {
    $duration: 400ms;
    $delay: 100ms;

    will-change: padding-bottom;
    transition: padding-bottom $duration $delay;

    &>a:first-child {
      will-change: margin-top, margin-left, margin-right, width;
      transition: margin-top $duration $delay, margin-left $duration ($duration + $delay), margin-right $duration ($duration + $delay);
    }

    &__profile-edit {
      will-change: margin-top;
      transition: margin-top $duration $delay;
    }

    &__actions {
      >.icon-button.close {
        will-change: opacity transform;
        transition: opacity $duration * 0.5 $delay,
          transform $duration $delay;
      }

      .compose__action-bar .icon-button {
        will-change: opacity transform;
        transition: opacity $duration * 0.5 $delay + $duration * 0.5,
          transform $duration $delay;
      }
    }
  }
}