@account-card-display-image-size: 64px;

.accounts {

  .account {
    min-width: @account-card-display-image-size * 2;

    .account-image {
      font-size: @account-card-display-image-size;
    }

    .account-info {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      div {
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .flex-vertical-centered {
      .actions {
        .clickable;
      }
    }
  }

  .empty-container {
    .all-centered;

    color: @secondaryTextColor;
    font-size: 1.4em;
    height: 70vh;
    text-align: center;

    .message {
      margin: 10px;

      .mdi-plus {
        margin: 0 5px;
        background-color: @accentColor;
        border-radius: 50%;
        color: @m-white;
      }

      .empty-icon {
        color: @m-amber;
        font-size: 8em;
        opacity: 0.7;
      }
    }
  }
}