global-link-list {
  position: relative;
  z-index: 2;
}

.global-link-list-outer.ani-slide-up-down {
  overflow: visible;
}

.global-link-list-inner {
  display: flex;
  flex-flow: row;
  justify-content: center;
  flex-wrap: wrap;

  .msg {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-content: center;
    align-self: center;
    padding: 10px;

    color: $light-theme-text-color;
    @include dark-theme() {
      color: $dark-theme-text-color-lighter;
    }
  }
  .global-link {
    flex: 1 1 auto;
    margin: 4px 2px 0;
    position: relative;

    > .md-button:focus + .controls,
    &.focus .controls,
    &:hover .controls {
      visibility: visible;

      .md-button {
        opacity: 1;
        transition: $transition-enter;
      }
      .edit-button {
        transform: translate(0, 0);
      }
      .trash-button {
        transform: translate(0, 0);
      }
    }

    &:first-child {
      flex: 0 0 auto;
    }

    @include ng-pop-in-popout;
  }

  .global-link > .md-button {
    border-radius: 0;
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    justify-content: center;
    color: #000000;
    text-transform: none;
    margin: 0;
    max-height: 36px;
    min-width: 0;
  }

  .controls {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 5;
    visibility: hidden;
    display: flex;
    flex-direction: row;
    // TODO fix that this causes an overflow
    padding: 0 10px;
    transform: translate(-50%, 0);

    .md-button {
      transition: $transition-leave;
      border-radius: 0;
      margin: 0;
      padding: 0;
      width: 32px;
      height: 32px;
      min-height: 0;
      opacity: 0;
    }
  }

  $this-distance: 30px;
  .edit-button {
    // TODO fix that this causes an overflow
    transform: translate(-$this-distance, $this-distance);
  }
  .trash-button {
    // TODO fix that this causes an overflow
    transform: translate($this-distance, $this-distance);
  }
}